js-省市二级联动

bootstrap+jQuery
省市二级联动

	html:
	        <div class="panel panel-default">
            <div class="panel-body">
                <h2>二级联动</h2>
                <select name="" id="selectProvince">
                    <option value="province1">辽宁省</option>
                    <option value="province2" selected>吉林省</option>
                    <option value="province3">黑龙江省</option>
                </select>
                <select name="" id="selectCity">

                </select>
            </div>
        </div>

js:
	    //  省 市 联动
            var province;
            var cities = $('#selectCity');

            province1City = ["沈阳", "大连", "鞍山", "盘锦"];
            province2City = ["长春", "铁岭", "长白山"];
            province3City = ["哈尔滨", "鹤岗", "牡丹江", "齐齐哈尔"];

            changeCityList();

            $('#selectProvince').on("change", function () {
                changeCityList();
            })
            function changeCityList() {
                province = $('#selectProvince').val();
                cities.empty();
                if (province == "province1") {
                    changeCityToFun(province1City);
                    // province1City.forEach(element => {
                    //     cities.append(`${element}`);
                    // });
                } else if (province == "province2") {
                    changeCityToFun(province2City);
                } else {
                    changeCityToFun(province3City);
                }
            }
            function changeCityToFun(provinceName) {
                provinceName.forEach(element => {
                    cities.append(`${element}`);
                });
            }