jquery版省市联动简单例子

299
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jq版省市联动</title>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
    <select id="province">
        <option>==请选择==</option>
    </select>
    <select id="city">
        <option>==请选择==</option>
    </select>
</body>
<script>
    var pro = ["新疆", "北京", "上海"];
    var city = [["乌鲁木齐", "吐鲁番", "克拉玛依", "石河子"], ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区"], ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区"]];

    $(function(){
        $.each(pro, function(i){
        $("#province").append("<option value="+ i + ">" + pro[i] + "</option>");
        });
        $("#province").change(function () {
            var citylist = city[this.value];
            //清空前一次的内容
            $("#city").empty();
            $.each(citylist, function (j) {
                    $("#city").append("<option>" + citylist[j] + "</option>");
            });
        });
    });
</script>
</html>