网上搜索的,整理记忆一下。
最简单jQuery实现二级省市级联,三级级联可依此扩展
1.首先需要引入jQuery
2.取出省份下拉列表对象,当省份下拉列表域发生改变时,执行如下方法:onchange ();
3.该方法解析:取得省份下拉列表对象,和被选中的option文本,取得城市下拉列表对象,并清空城市所有option,根据省份被选中的option内的文本,来填充不同的城市,由此实现二级联动。
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript">
function changecity(){
var pro = $("#pro");
var provalue = pro.find("option:selected").text();//另一种写法(1,2合并):var pro = $("#pro option:selected").text();
var city = $("#city");
city.empty();//清空城市下拉框
switch(provalue){
case "北京市":
city.append("<option>朝阳区</option>");
city.append("<option>海淀区</option>");
city.append("<option>西城区</option>");
break;
case "河南省":
city.append("<option>郑州市</option>");
city.append("<option>洛阳市</option>");
city.append("<option>新乡市</option>");
break;
case "山东省":
city.append("<option>聊城市</option>");
city.append("<option>济南市</option>");
city.append("<option>青岛市</option>");
break;
} } </script>
HTML代码
<select id=”pro” οnchange="changecity()">
<option>==请选择省==</option>
<option>北京市</option>
<option>河南省</option>
<option>山东省</option>
<option>上海市</option>
</select
<select id=”city”>
<option>==请选择市==</option>
</select>
百度的链接