中国省市二级联动——纯前端无后端

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="jquery-1.8.3.js"></script>
		<script >
 
        var p=["北京","黑龙江","吉林","山东","郑州"];
        var c=[["东城区",
          "西城区",
          "崇文区",
          "宣武区",
          "朝阳区",
          "丰台区",
          "石景山区",
          "海淀区",
          "门头沟区",
          "房山区",
          "通州区",
          "顺义区",
          "昌平区",
          "大兴区",
          "平谷区",
          "怀柔区",
          "密云县",
          "延庆县"],["哈尔滨","齐齐哈尔","大庆"],["长春","吉林","四平"],["济南","烟台","青岛","威海"],["郑州","许昌","南阳","开封","洛阳"]];
 
 
        $(function(){
            for(var i=0;i< p.length;i++){
                $("#province").append($("<option>").val(i).html(p[i]));
            }
            
            $("#province").change(function(){
                //$("#city").empty();
                $("#city").html("<option>--请选择--</option>");
                for(var i=0;i<c[$(this).val()].length;i++) {
                    $("#city").append($("<option>").html(c[$(this).val()][i]));
                }
            })
           
        })
    </script>

	</head>
	<body>
		<select id="province" name="province">
			<option>--省份--</option>
		</select>
		<select id="city" name="city">
			<option>--请选择--</option>
		</select>
	</body>
</html>

airuoflora

发布了47 篇原创文章 · 获赞 7 · 访问量 2万+

私信关注

中国省市二级联动——纯前端无后端

猜你喜欢