jQuery_省市选择

省市选择：

HTML结构：

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

城市数据的格式：

JS：

 //首先显示省份
        //each函数第一个参数是一个数组，第二个是函数
        //函数的第一个参数是索引（key），第二参数是value
        $.each(CITYS,function(keyPro,citys){
           var $pro = $('<option>'+ keyPro +'</option>');
            $('#provice').append($pro);
        });

        //当省份改变的时候触发城市变化
        $('#provice').on('change',function(){
            //防止省份后改变城市直接在后面上追加
                $('#city').empty();
             var pro = $('#provice option:selected').text();
            $.each(CITYS[pro],function(i,city){
               var $city = $('<option>'+ city+'</option>');
                $('#city').append($city);
            });
        });

        //在初始化页面时就去触发一下省份改变事件
        $('#provice').triggerHandler('change');

效果：

在页面上加载完成，为了让城市的选项不空着，就要用triggerHander触发Provice改变事件