原生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>