我想设置select的默认可是设置不了
想设置成这个样子
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <select id="province">
        <option value="-1">请选择</option>
    </select>
    <select id="city"></select> 
</body>
</html>
<script type="text/javascript">
     var cityJson={ 
    "city":[     
     {
         "title":"A",
         "lists":[
            "阿坝","阿拉善","阿里","安康","安庆","鞍山","安顺","安阳","澳门"
            ]
     },
     {
         "title":"B",
         "lists":["北京","白银","保定","宝鸡","保山","包头","巴中","北海","蚌埠","本溪","毕节","滨州","百色","亳州"
            ]
     },
     {
         "title":"C",
         "lists":["重庆","成都","长沙","长春","沧州","常德","昌都","长治","常州","巢湖","潮州","承德", "郴州","赤峰","池州","崇左","楚雄","滁州","朝阳"
            ]
     },
     {
         "title":"D",
         "lists":["大连","东莞","大理","丹东","大庆","大同","大兴安岭","德宏","德阳","德州","定西","迪庆","东营"
            ]
     },
     {
         "title":"E",
         "lists":["鄂尔多斯","恩施","鄂州"]
     },
     {
         "title":"F",
         "lists":["福州","防城港","佛山","抚顺","抚州","阜新","阜阳"
            ]

     },
     {
        "title":"G",
         "lists":["广州","桂林","贵阳","甘南","赣州","甘孜","广安","广元","贵港","果洛"]

     },
     {
        "title":"H",
         "lists":["杭州","哈尔滨","合肥","海口","呼和浩特","海北","海东","海南","海西","邯郸","汉中","鹤壁","河池","鹤岗","黑河","衡水","衡阳","河源","贺州","红河","淮安","淮北","怀化","淮南","黄冈","黄南","黄山","黄石","惠州","葫芦岛","呼伦贝尔","湖州","菏泽"
            ]
     },
     {
        "title":"J",
         "lists":["济南","佳木斯","吉安","江门","焦作","嘉兴","嘉峪关","揭阳","吉林","金昌","晋城","景德镇","荆门","荆州","金华","济宁","晋中","锦州","九江",
            "酒泉"
                    ]

     },
     {
        "title":"K",
         "lists":["昆明","开封"]

     },
     {
        "title":"L",
         "lists":["兰州","拉萨","来宾","莱芜","廊坊","乐山","凉山","连云港","聊城","辽阳","辽源","丽江","临沧","临汾","临夏","临沂","林芝","丽水","六安","六盘水",
            "柳州","陇南","龙岩","娄底","漯河","洛阳","泸州","吕梁"
                    ]

     },
     {
        "title":"M",
         "lists":["马鞍山","茂名","眉山","梅州","绵阳","牡丹江"]

     },
     {
        "title":"N",
         "lists":["南京","南昌","南宁","宁波","南充","南平","南通","南阳","那曲","内江", "宁德","怒江"
                     ]
     },
     {
        "title":"P",
         "lists":["盘锦","攀枝花","平顶山","平凉","萍乡","莆田","濮阳"]

     },
     {
        "title":"Q",
         "lists":["青岛","黔东南","黔南","黔西南","庆阳","清远","秦皇岛","钦州","齐齐哈尔","泉州","曲靖","衢州"]

     },
     {
        "title":"R",
         "lists":["日喀则","日照"]
     },
     {
        "title":"S",
         "lists":["上海","深圳","苏州","沈阳","石家庄","三门峡","三明","三亚","商洛","商丘","上饶","山南","汕头","汕尾","韶关","绍兴","邵阳","十堰","朔州","四平","绥化","遂宁","随州","宿迁","宿州"
            ]

     },
     {
        "title":"T",
         "lists":["天津","太原","泰安","泰州","台州","唐山","天水","铁岭","铜川","通化","通辽","铜陵","铜仁","台湾","W","武汉","乌鲁木齐","无锡","威海","潍坊","文山","温州","乌海","芜湖","乌兰察布","武威","梧州"
            ]
     },
     {
        "title":"X",
         "lists":["厦门","西安","西宁","襄樊","湘潭","湘西","咸宁","咸阳","孝感","邢台","新乡","信阳","新余","忻州","西双版纳","宣城","许昌","徐州","香港","锡林郭勒","兴安"
            ]

     },
     {
        "title":"Y",
         "lists":["银川","雅安","延安","延边","盐城","阳江","阳泉","扬州","烟台","宜宾","宜昌","宜春","营口","益阳","永州","岳阳","榆林","运城","云浮","玉树","玉溪","玉林"
            ]

     },
     {
         "title":"Z",
         "lists":["杂多县","赞皇县","枣强县","枣阳市","枣庄","泽库县","增城市","曾都区","泽普县","泽州县","札达县","扎赉特旗","扎兰屯市","扎鲁特旗","扎囊县","张北县","张店区","章贡区","张家港","张家界","张家口","漳平市","漳浦县","章丘市","樟树市","张湾区","彰武县","漳县","张掖","漳州","长子县","湛河区","湛江","站前区","沾益县","诏安县","召陵区","昭平县","肇庆","昭通","赵县","昭阳区","招远市","肇源县","肇州县","柞水县","柘城县","浙江","镇安县","振安区","镇巴县","正安县","正定县","正定新区","正蓝旗","正宁县","蒸湘区","正镶白旗","正阳县","郑州","镇海区","镇江","浈江区","镇康县","镇赉县","镇平县","振兴区","镇雄县","镇原县","志丹县","治多县","芝罘区","枝江市","芷江侗族自治县","织金县","中方县","中江县","钟楼区","中牟县","中宁县","中山","中山区","钟山区","钟山县","中卫","钟祥市","中阳县","中原区","周村区","周口","周宁县","舟曲县","舟山","周至县","庄河市","诸城市","珠海","珠晖区","诸暨市","驻马店","准格尔旗","涿鹿县","卓尼","涿州市","卓资县","珠山区","竹山县","竹溪县","株洲","株洲县","淄博","子长县","淄川区","自贡","秭归县","紫金县","自流井区","资溪县","资兴市","资阳"
            ]
     }
    ]
};
//拓张练习，如何网页加载时候，select就是就有默认值
window.onload = function test(){
    var cityArr = cityJson.city;
    var province = document.getElementById("province");
    for(var i =0;i<cityArr.length;i++){
        var op = new Option(cityArr[i].title,i);
        province.options.add(op);
    }
    province.onchange = function(){
        var provinceID = province.value;
        var cityView = document.getElementById("city");
        cityView.options.length=0;

            var cityPArr=[];
            cityPArr = cityArr[provinceID];
            console.log(cityPArr);
            for(var i =0;i<cityPArr.lists.length;i++){
                var op = new Option(cityPArr.lists[i],i);
               cityView.options.add(op);
            }



        }
    }

</script>
有关省份城市二级联动的问题，大牛们

xianjin.404

2个回复
