JavaScript二级联动

清疚 2022-05-29 14:15 219阅读 0赞

代码演示：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <select id="provinces">
        <option value="">请选择省份</option>
        
        
        
    </select>
    
    <select name="" id="citys">
        <option value="">请选择城市</option>
    </select>
    
    
    
    <script> // a={name:"alex"}; // b={"name":"alex"}; // console.log(a.name); // console.log(b["name"]); // data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]}; // console.log(data); // console.log(typeof data); // console.log(data["河北省"]); // console.log(data.河北省); // // for (var i in data){ // console.log(i); // } data={ "河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]}; var pro_ele=document.getElementById("provinces"); var city_ele=document.getElementById("citys") for(var i in data){ var ele=document.createElement("option"); ele.innerHTML=i; pro_ele.appendChild(ele) } pro_ele.onchange=function () { console.log(this.selectedIndex); console.log(this.options[this.selectedIndex]) var citys=data[this.options[this.selectedIndex].innerHTML]; //用于设置重选后清空原列表 city_ele.options.length=1; for(var i=0;i<citys.length;i++){ var ele=document.createElement("option"); ele.innerHTML=citys[i]; city_ele.appendChild(ele) } } </script>
    
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关 MYSQL二级联动

表数据 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

╰+哭是因爲堅強的太久メ/ 2022年11月25日 15:29/ 0 赞/ 126 阅读

相关二级联动菜单--常见的城市二级联动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>

蔚落/ 2022年09月17日 07:28/ 0 赞/ 214 阅读

相关 Jeecg二级联动

function initAdd()\{ aircodeAdd = $('\aircodeAdd').combobox(\{

分手后的思念是犯贱/ 2022年08月07日 13:44/ 0 赞/ 211 阅读

相关二级联动

以省份和城市为例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

电玩女神/ 2022年07月27日 14:42/ 0 赞/ 223 阅读

相关 JavaScript二级联动

代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

清疚/ 2022年05月29日 14:15/ 0 赞/ 220 阅读

相关 layui实现二级联动

使用layui的时候使用js的时候就要注意了很有可能这个时候js的很多事件都不好使了 ![70][] ![70 1][] ![70 2][]

灰太狼/ 2022年05月28日 04:22/ 0 赞/ 213 阅读

相关 javascript二级联动校果实现

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

淡淡的烟草味﹌/ 2022年05月26日 04:18/ 0 赞/ 151 阅读

相关二级联动代码

经常会用的多级联动的需求，今天总结一下，大多数是用在填写用户地址的时候，具体代码如下：引入jQuery文件，直接拷到html文件中就可以运行了； <!DOCTYPE ht

男娘i/ 2022年05月23日 11:18/ 0 赞/ 195 阅读

相关 JavaScript 省市二级联动

省市二级联动，只需要传入provsCitysMap的map集合，省市的id值即可。 <script type="text/javascript"> var pro

秒速五厘米/ 2022年05月19日 05:57/ 0 赞/ 293 阅读

相关二级联动

<select id="depositorytype" name="depositorytype" οnchange="ld();" class="zj-way">

刺骨的言语ヽ痛彻心扉/ 2022年04月02日 15:24/ 0 赞/ 240 阅读