jQuery实现省市联动

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="../js/jquery-1.11.0.min.js"></script>
    <body>
        <form action="#" method="get">
            <input type="hidden" name="id" value="007"/>
            姓名:<input name="username" value="xuduoduo"/><br>
            密码:<input type="password" name="password"  value="123" disabled="disabled"><br>
            性别:<input type="radio" name="sex" value="1" checked="checked">男
                <input type="radio" name="sex" value="0">女
                <br>
            爱好:<input type="checkbox" name="hobby" value="eat">吃
                <input type="checkbox" name="hobby" value="drink" checked="checked">喝
                <input type="checkbox" name="hobby" value="sleep" checked="checked">睡
                <br>
            头像:<input type="file" name="photo"><br>
            籍贯:
                <select name="pro">
                    <option >-请选择-</option>
                    <option value="0">黑龙江</option>
                    <option value="1">吉林</option>
                    <option value="2">辽宁</option>
                    <option value="3">河南</option>
                </select>
                <select name="city">
                    <option >-请选择-</option>     
                </select>
            <br>
            自我介绍:
                <textarea name="intr" cols="40" rows="4">good!</textarea>
            <br>
            <input type="submit" value="保存"/>
            <input type="reset" />
            <input type="button" value="普通按钮"/>
        </form>
    </body>
</html>

jQuery代码

<script type="text/javascript">
               // 定义二维数组:
			var arr = new Array(4);
			arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
			arr[1] = new Array("长春市","吉林市","四平市","通化市");
			arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
			arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");

	 	$(function(){
	 		$("[name='pro']").change(function(){
	 			//获取市下拉选
	 			var $city=$("[name='city']");
	 			//初始化
	 			$city.html($("<option>").html("-请选择-"));
	 			
	 			var pro=$(this).val();
	 			//获取所有的市数组   js对象转换成jQuery对象
	 			var cities=$(arr[pro]);
	 			
	 			//遍历数组,拼装成option 追加到市下拉选中
	 			cities.each(function(){
	 				$city.append("<option>"+this+"</option>");
	 				//$city.html($(""));
	 			});
	 		});

	 	});
	</script>

　　

posted @ 2017-03-12 22:30  San十岁你好つ  阅读(77)  评论(0)    收藏  举报