下拉选项框联动

来源：互联网发布：python数据分析统计学编辑：程序博客网时间：2024/05/22 01:29

先上效果图：

逻辑：

1、页面加载完成之后，自动更新第一个下拉框的数据。

2、前一个下拉框被改变之后，后面所以的选项框，内容全部清空，并且会触发紧挨着后面一个选项框更新。

代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><select name="area"><option>-请选择-</option></select><select name="level"><option>-请选择-</option></select><select name="hospital"><option>-请选择-</option></select><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><script type="text/javascript">/*模拟数据*/var getDate=function(n,m){if(n===undefined){return [{id:1,name:"朝阳区"},{id:2,name:"海淀区"}]}if(n==="area"){var area_level={1:[{id:11,name:'一级医院'},{id:12,name:'二级医院'}],2:[{id:21,name:'一级医院'},{id:23,name:'三级医院'}]} return area_level[m];}if(n==="level"){var area_level_hospital={11:[{id:111,name:'协和医院'},{id:112,name:'中日友好医院'}],12:[{id:121,name:'朝阳区医院'},{id:122,name:'和平医院'}],21:[{id:211,name:'301医院'},{id:212,name:'解放军医院'}],23:[{id:231,name:'海淀医院'},{id:232,name:'四季青医院'}]} return area_level_hospital[m];}};var select=$('select');console.log(select);/*下拉框的更新操作，以及触发下一个下拉框的更新*/select.on("updates",function(event,ajax){for(var i=0;i<ajax.data.length;i++){$(this).append('<option value="'+ajax.data[i].id+'">'+ajax.data[i].name+'</option>');}}).change(function(){var index=select.index(this);for(var i=index+1;i<select.length;i++){/*清空内容*/select[i].length=1;}var n=select[index].name;var m=select[index].value;select.eq(index+1).triggerHandler("updates",{data:getDate(n,m)});});/*第一个下拉框要手动触发*/select.eq(0).triggerHandler("updates",{data:getDate()});</script></body></html>

从老师转行写代码，囧，没能用通俗易懂的语言解释清楚，感觉好别扭，但是没有时间了。。。算了

阅读全文

0 0