js 省市二级联动

最新推荐文章于 2024-03-27 23:32:00 发布

哪里来的神

最新推荐文章于 2024-03-27 23:32:00 发布

阅读量539

点赞数

本文链接：https://blog.csdn.net/Jiao_Alemon/article/details/78513638

版权

方法一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			$(function() {
				var shengfen = [["邯郸", "仓州"], ["安阳", "洛阳"]];
				//给省份选项改变的事件
				$("#pro").change(function() {
					//清空上次
					$("#cityx").siblings().remove();
					var sheng = $(this).val();//省份对应value
					for(var i = 0; i < shengfen[sheng].length; i++) {
						var $o = $("<option></option>");//创建option标签
						$o.html(shengfen[sheng][i]);
						$("#city").append($o);
					}
				});
			});
		</script>
	</head>
	<body>
		<form>
			<select id="pro">
				<option>---请选择省份</option>
				<option value="0">河北省</option>
				<option value="1">河南省</option>
			</select>
			<select id="city">
				<option id="cityx">---请选择城市</option>
			</select>
		</form>
	</body>
</html>

方法二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
		$(function(){
			var cities = [
				["西二旗","西三旗","西四旗","西五旗","西六旗"],
                ["杭州市", "绍兴市", "温州市", "义乌市", "嘉兴市"],
                ["南京市", "苏州市", "扬州市", "无锡市"],
                ["武汉市", "襄阳市", "荆州市", "宜昌市", "恩施市"],
                ["石家庄市", "唐山市", "保定市", "邢台市", "廊坊市"],
                ["长春市", "吉林市", "四平市", "延边市"]
            ];

            var $city = $("#city");
            // 获得代表省份的下拉列表
            $("#province").change(function() {
                // alert(this.value);
                // alert($(this).val());

                // 清空第二个列表中的内容
                $city.get(0).options.length = 0;

                var val = this.value;
                // 遍历并且判断
                $.each(cities, function(i, n) {
                    // 判断
                    if(i == val) {
                        $(n).each(function(j, m) {
                            // alert(j + " " + m);
                            $city.append("<option>" + m + "</option>");
                        });
                    }
                });

            });
       	});
           </script>
	</head>
	<body>
		<select id="province" name="province">
                            <option value="0">北京</option>
                            <option value="1">浙江省</option>
                            <option value="2">江苏省</option>
                            <option value="3">湖北省</option>
                            <option value="4">河北省</option>
                            <option value="5">吉林省</option>
                        </select>

    	<select id="city" name="city"> 
    					<option>西二旗</option>
    					<option>西三旗</option>
    					<option>西四旗</option>
    					<option>西五旗</option>
    					<option>西六旗</option>
                        </select>
	</body>
</html>

哪里来的神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 省市二级联动

$(function() { var shengfen = [["邯郸", "仓州"], ["安阳", "洛阳"]]; //给省份选项改变的事件 $("#pro").change(function() { //清空上次 $("#cityx").siblings().remove(); var sheng = $(this).val();//省份
复制链接

扫一扫