Html+CSS的二级联动

it2022-05-05  111

1方式一:

<body>     <select id="province" οnchange="func1(this)" >     </select>     <select id="city"></select> </body> <script>     data = {"广东省":["广州","佛山"],"北京":["海淀","廊坊"], "海南省":["三亚","海口"]};     var pro  = document.getElementById("province");     var city = document.getElementById("city");

    for (var i in data){         var option_pro = document.createElement("option");         option_pro.innerHTML=i;         pro.appendChild(option_pro);     }

    function func1(self){         //console.log((self.options[self.selectedIndex]).innerHTML);         var choice = (self.options[self.selectedIndex]).innerHTML;

        var options = city.children;         for (var k=0; k<options.length; k++){             city.removeChild(options[k--]);         }

        for (var i in data[choice]){             var option_city = document.createElement("option");             option_city.innerHTML = data[choice][i];             city.appendChild(option_city);         }     } </script>

参考:https://www.cnblogs.com/klvchen/p/10364333.html

方式二:

var china = [ { "p_name": "吉林省", "p_id": "jl", "cities": [ { "c_name": "长春", "c_id": "cc" }, { "c_name": "四平", "c_id": "sp" }, { "c_name": "通化", "c_id": "th" }, { "c_name": "松原", "c_id": "sy" } ] },{ "p_name": "上海市", "p_id": "sh", "cities": [ { "c_name": "闵行区", "c_id": "mh" }, { "c_name": "徐汇区", "c_id": "xh" }, { "c_name": "黄浦区", "c_id": "hp" }, { "c_name": "浦东新区", "c_id": "pd" } ] } ];

<html>   <head>     <title>二级联动</title>     <meta http-equiv="content-type" content="text/html; charset=UTF-8">         </head>   <body>      <select id="province" name="province">        <option value="none">--请选择省--</option>             </select>             <select id="city" name="city">           <option value="none">--请选择市--</option>       </select>       <!-- 载入省市数据 -->          <script type="text/javascript" src="cities.js"></script>       <script type="text/javascript" >         //获得省级下拉框对象         var province = document.getElementById("province");         //遍历省市数据,并把里面省的数据追加到option选项中         for (var i=0; i<china.length; i++) {             var option = document.createElement("option");             option.value = china[i].p_id;             option.innerHTML = china[i].p_name;             province.appendChild(option);         }           //省级下拉框发生改变事件           province.onchange = function() {             //获取当前点击对象的值             var proid = this.value;             var cities;             //遍历省市数据,把省级下点击的那一个选项的值和省市数据中的             //省级数据对比,如果相等,取出当前的市的数据             for (var i=0; i<china.length; i++) {                 if (proid == china[i].p_id) {                     cities = china[i].cities;                 }             }             //获得市级下拉框对象             var city = document.getElementById("city");             //每次点击省级后,市级初始化,避免高级重复追加             city.innerHTML = "<option value='none'>--请选择市--</option>";             //遍历市级数据,并取出市级数据,追加到市级对象中             for (var i=0; i<cities.length; i++) {                 var option = document.createElement("option");                 option.innerHTML = cities[i].c_name;                 option.value = cities[i].c_id;                 city.appendChild(option);             }           }       </script>   </body>  </html>

https://www.cnblogs.com/loveyous/p/7492674.html

 

js获取select中选择的值

var obj = document.getElementById(”testSelect”); //定位id

var index = obj.selectedIndex; // 选中索引

var text = obj.options[index].text; // 选中文本

var value = obj.options[index].value; // 选中值

 

jQuery中获得选中select值

第一种方式 $('#testSelect option:selected').text();//选中的文本

$('#testSelect option:selected') .val();//选中的值

$("#testSelect ").get(0).selectedIndex;//索引

 

第二种方式 $("#tesetSelect").find("option:selected").text();//选中的文本 …….val(); …….get(0).selectedIndex;

 

//展示函数

var showResult=function(v){

var showLabel=document.getElementById("functioncode");

for(var i=0;i<showLabel.length;i++){

if(showLabel[i].value==v){

showLabel[i].selected="selected";

}

}

};


最新回复(0)