简便的三级联动

<body>
        <div class="sBox">
            <select class="provice" id="proviceId">
                <option value="">--省份--</option>
            </select>
            <select class="provice" id="city">
                <option value="">--市--</option>
            </select>
            <select class=" provice" id="code">
                <option>--邮编--</option>
            </select>
        </div>
        <script>
            var cityId = null;
            $.get("js/city.json", function(data, status) {
                for (var i = 0; i < data.城市代码.length; i++) {
                    var name = (data.城市代码[i].省);
                    $("#proviceId").append("<option value=" + i + ">" + name + "</option>");
                };
                $("#proviceId").change(function() {
                    $("#city").html("<option>--市--</option>");
                    $("#code").html("<option>--邮编--</option>");
                    cityId = ($("#proviceId").val());
                    for (var i = 0; i < (data.城市代码[cityId].市).length; i++) {
                        var city = (data.城市代码[cityId].市[i].市名);
                        $("#city").append("<option value=" + i + ">" + city + "</option>");
                    }
                });
                $("#city").change(function() {
                    $("#code").html("");
                    var cityIda = ($("#city").val());
                    var code = (data.城市代码[cityId].市[cityIda].编码);
                    $("#code").append("<option value=" + cityIda + ">" + code + "</option>");
                })
            })
        </script>
    </body>
要点： option标签储存两个内容 value储存共同的数组下标 text存储内容
猜你喜欢
