webday04-DOM-二级联动下拉框

最新推荐文章于 2022-08-26 16:18:50 发布

Victoria446704822

最新推荐文章于 2022-08-26 16:18:50 发布

阅读量143

点赞数

本文链接：https://blog.csdn.net/weixin_47407295/article/details/108201019

版权

<!DOCTYPE HTML>
<html>
   <head>
       <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
       <title>二级联动下拉框</title>
       <script>
           var data={
               "北京市":["海淀区","朝阳区","丰台区"],
               "河北省":["石家庄","唐山","秦皇岛"],
               "辽宁省":["沈阳","大连","鞍山"],
               "山东省":["青岛","济南","烟台"]
           }
           //练习1
           function getCountry(thisobj){
               //当选项切换时, 触发onchange事件, 执行getCountry函数, 在函数中获取当前选中的国家并弹出!
               alert(thisobj.value)
           }
           //练习2
           function selectCity(thisobj){
               //获取省份
               var prov=thisobj.value
               //获取城市
               var cities=data[prov]
               //获取第二个下拉框
               var sel2=document.getElementById("city")
               //清空第二个下拉框
               sel2.innerHTML="<option>--选择城市--</option>"
               //将每个城市填充到第二个下拉框中
               for(var i=0;i<cities.length;i++){
                   //创建option,并将城市填充到option中
                   var opt=document.createElement("option")
                   opt.innerHTML=cities[i]
                   //将option添加到第二个下拉框中
                   sel2.appendChild(opt)
               }
           }
       </script>
   </head>
   <body>
       <select name="country" οnchange="getCountry(this)">
           <option value="none">--选择国家--</option>
           <option value="中国">中国</option>
           <option value="美国">美国</option>
           <option value="日本">日本</option>
       </select>
       <br/><br/>
       <hr/>
       <br>
           <div id="seleDiv">
               <select id="province" οnchange="selectCity(this)">
                   <option>--选择省市--</option>
                   <option>北京市</option>
                   <option>河北省</option>
                   <option>辽宁省</option>
                   <option>山东省</option>
               </select>
               <select id="city">
                   <option>--选择城市--</option>
               </select>
           </div>
   </body>
</html>

Victoria446704822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webday04-DOM-二级联动下拉框

<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>二级联动下拉框</title> <script> var data={ "北京市":["海淀区","朝...
复制链接

扫一扫