地区:<select id="drpProvince"></select> - <select id="drpCity"></select> - <select id="drpArea"></select>
<script type="text/javascript">
//联动select数组
var arrSelect = new Array(document.getElementById("drpProvince"), document.getElementById("drpCity"), document.getElementById("drpArea"));
//多围数组数据,四围分别保存id、父级id、显示文本、文本值
var arrData = new Array(
<!--[999999,0,'--请选择--',''],[999998,999999,'--请选择--',''],[999997,999998,'--请选择--',''],-->
[1,0,'北京','1'],[2,1,'北京','2']
,[3,0,'湖南','3'],[4,3,'长沙','4'],[5,3,'株洲','5'],[6,3,'湘潭','6'],[7,6,'岳塘区','7'],[8,6,'雨湖区','8'],[9,6,'河塘区','9']
,[10,0,'广东','10'],[11,10,'广州','11'],[12,10,'佛山','12'],[13,11,'天河区','13'],[14,11,'番禺区','14'],[15,11,'越秀区','15'],[16,12,'南山区','16'],[17,12,'蝉城区','17']
);
//默认值数组
var arrDefault = new Array('10' ,'11' ,'13');
//初始化主函数
function arrInit(strInitID, arrSelect, arrMatrix, arrDefValue) {
function doChange(iIndex) {
var iCount = 0;
var sParentID = strInitID;
if (iIndex > 0) sParentID = arrSelect[iIndex - 1].options[arrSelect[iIndex - 1].selectedIndex].ID;
with (arrSelect[iIndex]) {
length = 0;
options[iCount++] = new Option('--所有--', '0', false, true);
for (var i = 0; i < arrMatrix.length; i++) {
if (String(arrMatrix[i][1]) == String(sParentID)) {
var oNewOption = new Option(arrMatrix[i][2], arrMatrix[i][3], false, false);
oNewOption.ID = arrMatrix[i][0];
options[iCount++] = oNewOption;
if(arrMatrix[i][3] == arrDefValue[iIndex])options[iCount - 1].selected = true;
};
};
/* if (iCount == 0) { //列表数为0则新增默认项
var oNull = new Option("--", null, false, true);
oNull.ID = "_0x" + (new Date()).getTime();
options[0] = oNull;
};*/
//联动改变所有子select
if (++iIndex < arrSelect.length) doChange(iIndex);
};
};
if (!arrDefValue) arrDefValue = [];
for (var i = 0; i < arrSelect.length - 1; i++) {
eval("arrSelect[" + i + "].onchange = function(){ doChange(" + (i + 1) + "); };");
}
doChange(0);
//只有第一次调用初始化主函数arrInit才使用默认值,之后手动选择不受默认值限制,因此清空。
arrDefValue = [];
};
arrInit(0,arrSelect,arrData,arrDefault);
</script>
分享到:
相关推荐
js select多级联动效果,无限分级~!
jquery cxselect联动插件select多级联动下拉菜单 jquery cxselect联动插件select多级联动下拉菜单 jquery cxselect联动插件select多级联动下拉菜单 jquery cxselect联动插件select多级联动下拉菜单
jQuery 插件编写的select三级联动,多级联动,修改方便,扩展方便
select多级动态联动,使用方式见实例index.html,API-见源码;
动态创建option,采用json 对象解析后台动态数据。
JavaScript 多级联动select
静态二级联动 js 调取数据 带有 option 值
下拉列表多级联动,根据xml文件可以生成三个下拉列表,并且根据所选内容不同,可以显示不同的内容
cxSelect多级联动下拉菜单
这是一个多级联运菜单自动生成程序,很好用的只要你输入你想要的几级数就可以自动生成了
由于业务需要,本代码是由bootstrap 的select改编而成,支持下拉菜单(单选 多选),并且支持有多级菜单,比之前使用3级联动使用方便,代码简单,下载后解压,查看demo.html ,可直接套用.
H5仿ios选择弹窗/多级联动选择
本文实例为大家分享了Bootstrap实现下拉菜单多级联动的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3...
动态多级联动 多级城市 JQ插件 select linkage jq
项目开发中写的 性能还没考虑到 不过很实用 jsp页面直接引用*.js文件 稍加修改 即可使用。可以实现无限级联动。
NULL 博文链接:https://heisetoufa.iteye.com/blog/353661
NULL 博文链接:https://lzqustc.iteye.com/blog/319191
vue-address-aync是一个异步的多级地址联动select组件。select元素可以通过异步接口获取数据之后,实现多级联动,因此它不单单可用于多级的地址选择,还可以支持其他的异步多级select联动。
jQuery多级联动美化版Select下拉框插件.zip