select 二级联动

来源:互联网 发布:广汽丰田面试经验知乎 编辑:程序博客网 时间:2024/05/16 10:56
    var cities = [
                ["杭州市", "绍兴市", "温州市", "义乌市", "嘉兴市"],
                ["南京市", "苏州市", "扬州市", "无锡市"],
                ["武汉市", "襄阳市", "荆州市", "宜昌市", "恩施市"],
                ["石家庄市", "唐山市", "保定市", "邢台市", "廊坊市"],
                ["长春市", "吉林市", "四平市", "延边市"]
            ];

            var $city = $("#city");
            // 获得代表省份的下拉列表
            $("#province").change(function() {
                // alert(this.value);
                // alert($(this).val());

                // 清空第二个列表中的内容
                $city.get(0).options.length = 0;

                var val = this.value;
                // 遍历并且判断
                $.each(cities, function(i, n) {
                    // 判断
                    if(i == val) {
                        $(n).each(function(j, m) {
                            // alert(j + " " + m);
                            $city.append("<option>" + m + "</option>");
                        });
                    }
                });

            });



    <select id="province" name="province">
                            <option value="">-请选择-</option>
                            <option value="0">浙江省</option>
                            <option value="1">江苏省</option>
                            <option value="2">湖北省</option>
                            <option value="3">河北省</option>
                            <option value="4">吉林省</option>
                        </select>

    <select id="city" name="city">                        
                        </select>

原创粉丝点击