3条回答 默认 最新
- CSDN专家-showbo 2021-09-30 14:42关注
select联动,需要用到js来实现,纯css无法实现,题主要的示例代码如下,修改下配置信息即可使用,有帮助麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~
<title>javascript省市县联动示例</title> 省:<select id="pro"> <option value="">请选择省</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广西</option> </select> 市:<select id="city"><option value="">请选择市</option></select> 县:<select id="town"><option value="">请选择市</option></select> <script> //市数据结构,为json数组对象。数组小标为省的id,数组项为市json数据。。 var arrCity = []; arrCity[1] = [{ t: '北京市', id: 1 }]; arrCity[2] = [{ t: '上海市', id: 2 }]; arrCity[3] = [{ t: '南宁市', id: 3 }, { t: '桂林市', id: 4 }, { t: '柳州市', id: 5 }]; //如果还有县的联动,同理生成arrTown即可 var arrTown = []; arrTown[1] = [{ t: '东城区', id: 1 }, { t: '海淀区', id: 2 }] arrTown[2] = [{ t: '黄埔区', id: 4 }, { t: '静安区', id: 5 }] arrTown[3] = [{ t: '青秀区', id: 6 }] arrTown[4] = [{ t: '七星区', id: 7 }, { t: '象山区', id: 8 }, { t: '秀峰区', id: 9 }] arrTown[5] = [{ t: '鱼峰区', id: 10 }, { t: '拉堡', id: 11 }] document.getElementById('pro').onchange = function () { addOptions(document.getElementById('city'), arrCity[this.value]); document.getElementById('city').onchange();//同时加载城镇 } document.getElementById('city').onchange = function () { addOptions(document.getElementById('town'), arrTown[this.value]); } function addOptions(s, arr, initValue) { if (!arr || arr.length == 0) arr = [{ t: '请选择市', id: '' }]; if (!s) { alert('select对象不存在!'); return false } s.options.length = 0; var selectedIndex = 0; for (var i = 0; i < arr.length; i++) { s.options.add(new Option(arr[i].t, arr[i].id)); if (arr[i].id == initValue) selectedIndex = i; } } </script>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 1无用
悬赏问题
- ¥15 2020长安杯与连接网探
- ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么
- ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
- ¥16 mybatis的代理对象无法通过@Autowired装填
- ¥15 可见光定位matlab仿真
- ¥15 arduino 四自由度机械臂
- ¥15 wordpress 产品图片 GIF 没法显示
- ¥15 求三国群英传pl国战时间的修改方法
- ¥15 matlab代码代写,需写出详细代码,代价私
- ¥15 ROS系统搭建请教(跨境电商用途)