吉吉于

Asp.Net笔记(4):JS城市列表

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript">
        //定义存储省市信息的JSON集合
        var cityList = [
            { "provider": "广西", "citys": ["南宁", "柳州", "桂林"] },
            { "provider": "四川", "citys": ["成都", "绵阳", "德阳"] },
            { "provider": "新疆", "citys": ["乌鲁木齐", "喀什", "库尔勒"] }
        ];
        function changeCity() {
            //清空城市下拉列表
            document.getElementById("slcCitys").options.length = 0;
            //获取选中的省份选项
            var option = document.getElementById("slcProvider").options[document.getElementById("slcProvider").selectedIndex];
            //循环遍历JSON集合
            for (var i = 0; i < cityList.length; i++) {
                //判断JSON省份项与当前选中的省份是否一致
                if (cityList[i].provider == option.innerText) {
                    //从JSON集合中取出城市列表
                    for (var j = 0; j < cityList[i].citys.length; j++) {
                        var o = document.createElement("option");
                        o.innerText = cityList[i].citys[j];
                        document.getElementById("slcCitys").appendChild(o);
                    }
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <select runat="server" id="slcProvider" onchange="changeCity()">
            <option selected="true">请选择城市</option>
            <option>广西</option>
            <option>四川</option>
            <option>新疆</option>
        </select>
        <select runat="server" id="slcCitys">
            <option selected="true">请选择城市</option>
        </select>
    </div>
    </form>
</body>
</html>

 

转载请注明:于哲的博客 » Asp.Net笔记(4):JS城市列表