asp.net 实现省市级联-----<简单方法2>----前台实现

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #_body
        {
        }
    </style>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        var json = {
            "河北省": ["石家庄", "邯郸", "保定"],
            "河南省": ["郑州", "洛阳", "安阳"],
            "山东省": ["济南", "青岛", "德州"]
        }
        $(function () {
            loadPro(json);
        })
        function loadPro(json) {
            var $select = $("#province");
            for (var key in json) {
                var $option = $("<option>" + key + "</option>")
                $select.append($option);
            }
        }
        function loadcity() {
            //1.获取当前选择的值,2,遍历3,添加
            var $pro = $("#province");
            var $city = $("#city");
            var key_v = $pro.val();
            var citys = json[key_v];
            var city = $city.get(0);
            city.innerHTML = "";
            for (var i = 0; i < citys.length; i++) {
                var $option = $("<option>" + citys[i] + "</option>")
                $city.append($option);
            }
        }
    </script>
</head>
<body id="_body">
    <select id="province" onchange="loadcity()">
     
    </select>
    <br />
    <select id="city">
    </select>
</body>
</html>

  

posted @   爱吃猫的鱼  阅读(299)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示