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无用
悬赏问题
- ¥30 Matlab打开默认名称带有/的光谱数据
- ¥50 easyExcel模板 动态单元格合并列
- ¥15 res.rows如何取值使用
- ¥15 在odoo17开发环境中,怎么实现库存管理系统,或独立模块设计与AGV小车对接?开发方面应如何设计和开发?请详细解释MES或WMS在与AGV小车对接时需完成的设计和开发
- ¥15 CSP算法实现EEG特征提取,哪一步错了?
- ¥15 游戏盾如何溯源服务器真实ip?需要30个字。后面的字是凑数的
- ¥15 vue3前端取消收藏的不会引用collectId
- ¥15 delphi7 HMAC_SHA256方式加密
- ¥15 关于#qt#的问题:我想实现qcustomplot完成坐标轴
- ¥15 下列c语言代码为何输出了多余的空格