本帖最后由 谷粒姐姐 于 2018-5-4 13:40 编辑
1.1 案例六：使用JS完成省市联动的效果：1.1.1 需求：在注册页面上有两个下拉列表,左侧省份的下拉列表一改变,右侧的市的下拉列表也要跟着发生变化. 1.1.2 分析：1.1.2.1 技术分析:【JS中创建数组】 【JS的事件】 下拉的列表的改变的事件.onchange. 【JS的DOM的操作】 创建元素： 添加元素： 1.1.2.2 步骤分析【步骤一】创建一个HTML文件. 【步骤二】确定事件：onchange事件. 【步骤三】触发函数,在函数中编写代码. 【步骤四】获得到所选择的省份的信息. 【步骤五】根据选择的省份的信息获得到对应的数组中的市的数据. 【步骤六】遍历数组中的市的信息. 【步骤七】创建元素，创建文本,最后将元素添加到第二个列表中. 1.1.3 代码实现:[AppleScript] 纯文本查看 复制代码 // 定义数组：二维数组：
var arrs = new Array(5);
arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");
arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");
arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施");
arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市");
arrs[4] = new Array("长春市","吉林市","四平市","延边市");
function changeCity(value){
// 获得到选中的省份的信息.
var city = document.getElementById("city");
// 清除第二个列表中的内容:
for(var i=city.options.length;i>0;i--){
city.options[i] = null;
}
// city.options.length = 0;
// alert(value);
for(var i= 0 ;i< arrs.length;i++){
if(value == i){
// 获得所有的市的信息.
for(var j=0;j<arrs[i].length;j++){
// alert(arrs[i][j]);
// 创建元素：
var opEl = document.createElement("option");// <option></option>
// 创建文本节点:
var textNode = document.createTextNode(arrs[i][j]);
// 将文本的内容添加到option元素中.
opEl.appendChild(textNode);
// 将option的元素添加到第二个列表中.
city.appendChild(opEl);
}
}
}
}
1.1.4 总结：
1.1.4.1 JS的内置对象:
[/i][/i][/i][/i][attach]227068[/attach][i][i][i][i]
Ø Array:
[/i][/i][/i][/i][attach]227069[/attach][i][i][i][i]
Ø Boolean:
[/i][/i][/i][/i][attach]227070[/attach][i][i][i][i]
Ø Date:
[/i][/i][/i][/i][attach]227071[/attach][i][i][i][i]
* [url=http://www.baidu.com?time=new]http://www.baidu.com?time=new[/url] Date().getTime();
Ø Math对象:
[AppleScript] 纯文本查看 复制代码 Ø String对象:
* charAt();
* indexOf();
* lastIndexOf();
* split();
* replace();
* substring();
* substr(); [AppleScript] 纯文本查看 复制代码 * parseInt();
* parseInt(“11”);
* parseFloat();
* parseFloat(“32.09”);
* 编码和解码的方法：
// 解码
* decodeURI();
* decodeURIComponent();
// 编码
* encodeURI();
* encodeURIComponent();
eval函数：
* 将一段内容当成是JS的代码执行.
//var sss = “alert(‘aaaa’)”;
//eval(sss);
| 
收藏
淘帖
踩
