首页 > 代码库 > 省市级联--jquery调取json数据

省市级联--jquery调取json数据

使用jQuery mobile作为创建移动web的框架,需要实现省市级联的功能,具体代码如下(还需要优化的地方):

Html代码:

jQuery mobile中,有input  list属性,下方紧跟<datalist >标签,中间包含的<option value=http://www.mamicode.com/"XXXX">即为选项,相当于这个input为有下拉列表的功能,当然,input的list名称需要和datalist中的id一致。

 <input id="province" list="prvlist" placeholder="省/自治区/直辖市" onblur="changeProvince();">
    <datalist id="prvlist">

    </datalist>
    <input style="" id="city" list="citylist" placeholder="市" onblur="changeCity();">
    <datalist id="citylist">

    </datalist>
    <input style="" id="area" list="arealist" placeholder="区">
    <datalist id="arealist">

    </datalist>
js代码:

js代码,主要功能

1、提取json数据,绑定到省级下拉列表内

2、省级input选择好后,市级列表自动绑定

3、区级下拉列表同市级一样

 <script>

        $(function () {
            getProvince();    //页面打开后,省级下拉列表自动绑定
        })
        //获取省份
        function getProvince() {
            var Aid;
            var Afather;
            $.get('area_json0.txt', {}, function (data) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].fatherId == 0) {
                        Afather += '<option id=" ' + data[i].id + '" value=http://www.mamicode.com/"' + data[i].name + '">';>
代码应该还可以进一步优化,暂时将代码保存。

省市级联--jquery调取json数据