如何进行js动态生成option?如何实现二级连动？

何为二级连动？

首先要明白什么是二级连动！顾名思义，就是一个动，另外一个也跟着一起动

看下面的例子：



这里有一个“市级”的选择列表框，还有一个“县级”的选择列表框，如果“市级”的选择列表框中的值发现变化，那么会连带“县级”的列表框发生变化。

function selectOrg(){
var selectNow = document.getElementById("city"); //得到当前<select id="city">的对象
var url = '<%=path%>/rb-addressBillServices.do'; //发送请求的路径
Ext.Ajax.request({ //利用Ext的AJAX向后台发送请求
url:url,
method:'post',
params:{
method:'getOrgName()', //后台执行的方法名
responseType : 'text'
},
success: function(msg){
var orgarr = msg.responseText.split("|"); //因为后台传递过来的是形式为 1,张三 | 2,李四 | 3,王五
for(var i=0; i<orgarr.length; i++){
var org = orgarr[i].split(","); //得到数组 1,张三
addOption(selectNow,org[1],org[0]); //调用addOption方法，进行赋值，下面
}
},
failure: function (){
Ext.Msg.alert('系统提示','保存失败！');
}
});
}

这个方法是一个通用的动态添加Option，得到select的id，从数据库中查询到实际值id和显示值name，分别存入到text和value中

function addOption(objSelectNow, txt, val) {
var objOption = document.createElement("OPTION"); // 使用W3C标准语法为SELECT添加Option
objOption.text = txt; //得到显示值
objOption.value = val; //得到实际值
objSelectNow.options.add(objOption); //把每一个option添加到select中
}

当页面加载的时候，我们已经能够把数据动态的存入到select下拉列表中了，那么，接下来，我们就要实现所谓的二级连动了：

在select 中添加对应的onchange事件，也就是当第一个“市级”下拉框中的值改变时，把第二个下拉框中的值进行改变：



添加函数：changeCity(this)

function changeCity(obj){
var selectNow = document.getElementById("county");
var url = '<%=path%>/rb-addressBillServices.do';
if(obj.value == 0){
for(var k=selectNow.length-1; k>=0; k--){
selectNow.options.removeChild(selectNow.options[k]); //这里一定要进行倒序删除
}
selectNow.options.add(new Option("请选择县","0"));
}else{
Ext.Ajax.request({
url:url,
method:'post',
params:{
responseType : 'text',
method:'getOrgNameToCounty()&',
opval:obj.value
},
success: function(msg){
for(var k=selectNow.length-1; k>=0; k--){
selectNow.options.removeChild(selectNow.options[k]);
}
var orgarr = msg.responseText.split("|");
for(var i=0; i<orgarr.length; i++){
var org = orgarr[i].split(",");
addOption(selectNow,org[1],org[0]);
}
},
failure: function (){
Ext.Msg.alert('系统提示','保存失败！');
}
});
}
}

这里为什么要进行删除呢？你想啊，比如说：你在第一个下拉框中选中了“河北省”，那么，对应的在第二个下拉框中，就会出现在“河北省”中的各个市，现在问题就来了，假如你把第二个下拉框中的值不进行删除，那么，当你再选择“河南省”，那么恐怖的事情就发生了，刚才“河北省”中的各个市还存在第二个下拉框中，而点击了下拉框又会触发了onchange事件，那么第二个下拉框中就会存在“河北省”和“河南省”两个省份的市级信息，所以，我们要进行删除

知道了为什么要进行删除，那么我们还为什么要进行倒序删除呢？再举个例子，假如，我们就是正序进行的删除，那么，相应的代码会是这样：

for(var k＝0；k<selectNow.length; k++){
selectNow.options.removeChild(selectNow.options[k]);
}
假设还是刚才的选择了“河北省”，那么其实在第二个市级下拉框中会存在一个类似的集合，里面包括河北省的11个市，当再选择“河南省”时，我们会删除原有的“河北省”的11个市的信息，那么运行for循环：

第一次： k=0; 删除的元素 selectNow.options[0] 剩下的元素会发生变化吗？[1,2,3]，删除了list.get(0),那么2会成为list.get(0)

第二次： k=1; 删除的元素 selectNow.options[1] 删除了第二个元素，但第一个元素呢？没有进行删除

list = [1，2，3，4]

第一次删除 ： 移除元素1 剩下元素 [2，3，4]

第二次删除 ： 移除元素3 剩下元素 [2，4]

元素2永远也不会再被删除掉，所以，我们要进行倒序删除