关联二级下拉菜单

本文介绍如何使用原生JavaScript来封装一个关联的二级下拉菜单功能,包括详细的操作步骤和代码示例,涵盖了与后台交互的JS部分。
摘要由CSDN通过智能技术生成

原生JS:

<script language="JavaScript" type="text/javascript">
   //定义区县的二维数组,里面的顺序跟省份的顺序是相同的。通过selectedIndex获得城市的下标值来得到相应的区县数组
   var Ext1=[
   ["历下区","市中区","历城区","槐荫区","天桥区","长清区","章丘区","平阴","济阳","商河","莱芜"],
   ["兰山区","罗庄区","河东区","沂南县","郯城县","沂水县","苍山县","费县","平邑县","莒南县","蒙阴县","临沭县","兰陵县","蒙山旅游度假区"],
   ["市南区","市北区","四方区","黄岛区","崂山区","李沧区","城阳区","胶州市","即墨市","平度市","胶南市","莱西市"],
   ["淄川区","张店区","博山区","临淄区","周村区","桓台县","高青县","沂源县"], 
   ["枣庄市中区","薛城区","峄城区","台儿庄区","山亭区","滕州市"],
   ["东营区","河口区","垦利县","利津县","广饶县"],
   ["烟台高新区","烟台开发区","芝罘区","福山区","牟平区","莱山区","龙口市","莱阳市","莱州市","蓬莱市","招远市","栖霞市","海阳市","长岛市"],
   ["潍城区","寒亭区","坊子区","奎文区","青州市","诸城市","寿光市","安丘市","高密市","昌邑市","临朐县","昌乐县"],
   ["济宁市中区","任城区","曲阜市","兖州市","邹城市","微山县","鱼台县","金乡县","嘉祥县","汶上县","泗水县","梁山县"],
   ["泰山区","岱岳区","新泰市","肥城市","宁阳县","东平县"],   
   ["环翠区","文登市","荣成市","乳山市"],   
   ["东港区","岚山区","五莲县","莒县"],   
   ["德城区","乐陵市","禹城市","陵城区","宁津县","庆云县","临邑县","齐河县","平原县","夏津县","武城县"],   
   ["东昌府区","临清市","阳谷县","莘县","茌平县","东阿县","冠县","高唐县"],
   ["滨州高新区","滨城区","惠民县","阳信县","无棣县","沾化县","博兴县","邹平县"],   
   ["菏泽开发区","牡丹区","定陶区","曹县","单县","成武县","巨野县","郓城县","鄄城县","东明县"],   
   ];
  function getCity(){
     //获得城市下拉框的对象
     var sltCity=document.form1.city;
     //获得区县下拉框的对象
     var sltCounty=document.form1.Ext1;     
     //得到对应城市的区县数组
     var cityCounty=Ext1[sltCity.selectedIndex - 1];
     //清空区县下拉框,仅留提示选项
     sltCounty.length=1;
     //将区县数组中的值填充到区县下拉框中
     for(var i=0;i<cityCounty.length;i++){
       sltCounty[i+1]=new Option(cityCounty[i],cityCounty[i]);
     }
   }
 </script>
     <form name="form1">
     <select name="city" onChange="getCity()">
   <option value="0" selected='selected'>选择地市</option>
   <option value='济南市'>济南市</option>
   <option value='临沂市'>临沂市</option>
   <option value='青岛市'>青岛市</option>
   <option value='淄博市'>淄博市</option>
   <option value='枣庄市'>枣庄市</option>
   <option value='东营市'>东营市</option>
   <option value='烟台市'>烟台市</option>
   <option value='潍坊市'>潍坊市</option>
   <option value='济宁市'>济宁市</option>
   <option value='泰安市'>泰安市</option>
   <option value='威海市'>威海市</option>
   <option value='日照市'>日照市</option>
   <option value='德州市'>德州市</option>
   <option value='聊城市'>聊城市</option>
   <option value='滨州市'>滨州市</option>
   <option value='菏泽市'>菏泽市</option>
 </select>
            
 <select name="Ext1">
   <option value="0">区县</option>
 </select>
      </form>

封装:
(连预约后台那一串JS都装进去了)

 <select dataType="Require" msg="请选择城市" id="province" name="Ext1" onchange="changeProvince(document.getElementById('province'),document.getElementById('city'));">
</select>
<select msg="请选择县区" id="city" name="Ext2">
</select>

            <script src="http://www.huatu.com/images/2015css/js/jquery-2.1.4.min.js"></script>
            <script src="https://www.huatu.com/other/yuyue/js/validator.js" charset="gbk"></script>
    		<script src="http://sd.huatu.com/zt/js/province.js" charset="gbk"></script>
    		<script src="http://sd.huatu.com/zt/dzs/order.js"></script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值