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

最新推荐文章于 2022-12-04 20:38:52 发布

airuoflora

最新推荐文章于 2022-12-04 20:38:52 发布

阅读量893

点赞数

分类专栏：练习 html java 个人经验文章标签： java jsp 前端

本文链接：https://blog.csdn.net/floraruo/article/details/98216399

版权

java 同时被 3 个专栏收录

30 篇文章 1 订阅

订阅专栏

个人经验

28 篇文章 0 订阅

订阅专栏

练习

19 篇文章 0 订阅

订阅专栏

<%@ 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>