省市レベルの連合--jqueryはjsonデータを呼び出します


jQuery mobileをモバイルウェブの作成フレームワークとして使用するには、省市レベルの機能を実現する必要があります.具体的なコードは以下の通りです(最適化が必要な場所):
Htmlコード:
jQuery mobileには、inputリスト属性があり、下にラベルが付いており、その中に含まれるがオプションであり、このinputがドロップダウンリストの機能に相当する.もちろん、inputのリスト名は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="' + data[i].name + '">';
                    }
                }
                $("#prvlist").append(Afather);
            } , 'json');
        }

        function changeProvince(){
            var city;
            var prv_val=$("#province").val();
            getJson(prv_val);
        }
        function changeCity(){
            var city_val=$("#city").val();
            getJsonArea(city_val);
        }
        function getJson(Name){
            var cityID;
            $.get('area_json0.txt', {}, function (data) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].name == Name) {
                        cityID=data[i].id;
                    }
                }
                setCity(cityID);
            } , 'json');
        }
        function setCity(val){
            var Acity;
            var $listcity=$("#citylist");
            $.get('area_json0.txt', {}, function (data) {
                for (var n = 0; n < data.length; n++) {
                    if (data[n].fatherId == val) {
//                        alert(data[n].id);
                        Acity += '<option id=" ' + data[n].id + '" value="' + data[n].name + '">';
                    }
                }
                $listcity.append(Acity);
            } , 'json');
       }
        function getJsonArea(Name){
            var areaID;
            $.get('area_json0.txt', {}, function (data) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].name == Name) {
                        areaID=data[i].id;
                    }
                }
                setArea(areaID);
            } , 'json');
        }
        function setArea(Aval){
            var Aarea;
            var $listarea=$("#arealist");
            $.get('area_json0.txt', {}, function (data) {
                for (var m = 0; m < data.length; m++) {
                    if (data[m].fatherId == Aval) {
//                        alert(data[n].id);
                        Aarea += '<option id=" ' + data[m].id + '" value="' + data[m].name + '">';
                    }
                }
                $listarea.append(Aarea);
            } , 'json');
        }
    </script>

コードはさらに最適化され、一時的にコードを保存することもできるはずです.