何为二级连动？
首先要明白什么是二级连动！顾名思义，就是一个动，另外一个也跟着一起动
看下面的例子：
这里有一个“市级”的选择列表框，还有一个“县级”的选择列表框，如果“市级”的选择列表框中的值发现变化，那么会连带“县级”的列表框发生变化。
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永远也不会再被删除掉，所以，我们要进行倒序删除
如何进行js动态生成option?如何实现二级连动？,布布扣,bubuko.com