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 随身WiFi网络灯亮但是没有网络,如何解决?
- ¥15 gdf格式的脑电数据如何处理matlab
- ¥20 重新写的代码替换了之后运行hbuliderx就这样了
- ¥100 监控抖音用户作品更新可以微信公众号提醒
- ¥15 UE5 如何可以不渲染HDRIBackdrop背景
- ¥70 2048小游戏毕设项目
- ¥20 mysql架构,按照姓名分表
- ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分
- ¥15 delphi webbrowser组件网页下拉菜单自动选择问题
- ¥15 linux驱动,linux应用,多线程