这篇博客介绍了一个JavaScript实现的下拉框联动案例。当用户选择省份时，城市下拉框会相应更新其内容。文章详细展示了如何在DOM加载后填充省份下拉框，并在省份选项改变时动态更新城市下拉框。两种方法包括直接设置innerHTML和使用document.createElement创建option元素。
1) 下拉框联动
需求：有两个下拉框：省份、城市。选择省份后更新城市下拉框的内容。
先在界面中定义两个下拉框：
<select id="province" onchange="citychange(this)"></select>
<select id="city"></select>
在页面加载结束后给省下拉框添加内容。
<body onload="province()">
添加下拉内容有两种方式：
1是直接将标签全组织为字串，赋值给province标签。使用dom.innerHTML=””;
2是使用document.createElement("option");再使用Dom.appendChild(“”);
function province(){
var selectDom = document.getElementById("province");
var arr = [{"id":1001,"name":"湖南省"},{"id":1002,"name":"湖北省"}];
/* 方法一
var html = "<option value=''>--请选择--</option>";
for(var i=0;i<arr.length;i++){
html += "<option value='"+arr[i].id+"'>"+arr[i].name+"</option>";
}
selectDom.innerHTML = html;
*/
var optionEmpty = document.createElement("option");
optionEmpty.value = "";
optionEmpty.text = "--请选择--";
selectDom.appendChild(optionEmpty);
for(var i = 0; i < arr.length; i++){
var option = document.createElement("option");
option.value = arr[i].id;
option.text = arr[i].name;
selectDom.appendChild(option);
}
};
第一个下拉框内容有变化时调用citychange方法：
//城市数据
var cityDatas = {
"1001":"100101#长沙,100102#郴州,100103#株洲",
"1002":"100201#武汉,100202#天门,10023#宜昌"
};
function citychange(obj){
var value = obj.value;
var datas = cityDatas[value];
var cityDom = document.getElementById("city");
cityDom.innerHTML = "";
var optionEmpty = document.createElement("option");
optionEmpty.value = "";
optionEmpty.text = "--请选择--";
cityDom.appendChild(optionEmpty);
if(datas){
var citys = datas.split(",");
for(var i=0;i<citys.length;i++){
var option = document.createElement("option");
var v = citys[i].split("#");
option.value = v[0];
option.text = v[1];
cityDom.appendChild(option);
}
}
};
结果如下：
扫一扫
1753
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
