2016-03-19 14 views
0

JQuery kullanarak bir JSON içinden seçme seçeneklerini yerleştirmeye çalışıyordum. i yakalamak da belgelerle formunu doldurmak ve yazma ve seçim yankı burada kod edilirjquery öğesini kullanarak seçme seçeneklerini kullanma

<div class="form-group row"> 
    <label for="" class="col-sm-2 form-control-label">Country</label> 
    <div class="col-sm-10"> 
     <select class="form-control selectpicker" id="country" placeholder="" data-live-search="true"> 
     </select> 
    </div> 
</div> 

Ve - -

(function() { 
 
    var url = "dummy.json"; 
 
    countries = []; 
 
    divisions = []; 
 
    districts = []; 
 
    subdistricts = []; 
 
    $.getJSON(url) 
 
    .done(function(data) { 
 
     countries.push(data['Country']); 
 
     divisions.push(data['Divisions']); 
 
     districts.push(data['Districts']); 
 
     subdistricts.push(data['Subdistricts']); 
 
     $('#country').empty(); 
 
     for(i=0; i<countries[0].length; i++){ 
 
      $('#country').append('<option data-tokens="' + countries[0][i]["name"] +'" value="' + i + '">' + countries[0][i]["name"] + '</option>'); 
 
     }; 
 
     $('#country').change(function(){ 
 
       var selected = $(this).val(); 
 
       console.log(selected); 
 
      }); 
 
     }); 
 
})();
İşte (arama seçenekleri ile) benim html formu kodudur

Sorunum, kodu çalıştırdıktan sonra seçim formu doldurulmuyor. Kodumda herhangi bir sözdizimi hatası var mı? Yoksa yanlış yöne mi yaklaşıyorum? Eğer json dosyasını görmek isteyen varsa, ben burada yayınlayacağım.

ben konsolda kontrol ettikten:

{ 
    "Country": [ 
    { 
     "id": "01", 
     "name": "China", 
     "capital": "Beijing", 
     "divisions": "[01, 02, 03]", 
     "districts": "[01, 02, 03]" 
    }, 
    { 
     "id": "02", 
     "name": "Bangladesh", 
     "capital": "Dhaka", 
     "divisions": "[04,05,06,07,08,09,10,11]", 
     "Districts": "[04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]" 
    }, 
    { 
     "id": "03", 
     "name": "Singapore", 
     "Capital": "Singapore City", 
     "Divisions": "[12,13,14,15,16]", 
     "Districts": "[32,33,34,35,36]" 
    } 
    ], 
    "Divisions": [ 
    { 
     "id": "01", 
     "name": "Shengdong", 
     "districts": [ 
     [ 
      "[01]" 
     ] 
     ] 
    }, 
    { 
     "id": "02", 
     "name": "Anhui", 
     "districts": [ 
     [ 
      "[02]" 
     ] 
     ] 
    }, 
    { 
     "id": "03", 
     "name": "Fujian", 
     "districts": [ 
     [ 
      "[03]" 
     ] 
     ] 
    }, 
    { 
     "id": "04", 
     "name": "Barisal", 
     "districts": "[4,5,6]" 
    }, 
    { 
     "id": "05", 
     "name": "Chittagong", 
     "Districts": "[07,08,09,10]" 
    }, 
    { 
     "id": "06", 
     "name": "Dhaka", 
     "Districts": "[11,12]" 
    }, 
    { 
     "id": "07", 
     "name": "Khulna", 
     "Districts": "[13,14]" 
    }, 
    { 
     "id": "08", 
     "name": "Central Region", 
     "Districts": [ 
     [ 
      "[15]" 
     ] 
     ] 
    }, 
    { 
     "id": "09", 
     "name": "North Region", 
     "Districts": [ 
     [ 
      "[16]" 
     ] 
     ] 
    }, 
    { 
     "id": "10", 
     "name": "East Region", 
     "Districts": [ 
     [ 
      "[17]" 
     ] 
     ] 
    }, 
    { 
     "id": "11", 
     "name": "North-east Region", 
     "Districts": [ 
     [ 
      "[18]" 
     ] 
     ] 
    }, 
    { 
     "id": "12", 
     "name": "West Region", 
     "Districts": [ 
     [ 
      "[19]" 
     ] 
     ] 
    } 
    ], 
    "Districts": [ 
    { 
     "id": "1", 
     "name": "Dongcheng", 
     "Subdistricts": [ 
     [ 
      "[1]" 
     ] 
     ] 
    }, 
    { 
     "id": "2", 
     "name": "Yaohai", 
     "Subdistricts": [ 
     [ 
      "[2]" 
     ] 
     ] 
    }, 
    { 
     "id": "3", 
     "name": "Luyang", 
     "Subdistricts": [ 
     [ 
      "[3]" 
     ] 
     ] 
    }, 
    { 
     "id": "4", 
     "name": "Barisal", 
     "Subdistricts": [ 
     [ 
      "[4]" 
     ] 
     ] 
    }, 
    { 
     "id": "5", 
     "name": "Barguna", 
     "Subdistricts": [ 
     [ 
      "[5]" 
     ] 
     ] 
    }, 
    { 
     "id": "6", 
     "name": "Bhola", 
     "Subdistricts": "[6,7]" 
    }, 
    { 
     "id": "7", 
     "name": "Chittagong", 
     "Subdistricts": "[8,9,10,11]" 
    }, 
    { 
     "id": "8", 
     "name": "Cox's Bazar", 
     "Subdistricts": [ 
     [ 
      "[12]" 
     ] 
     ] 
    }, 
    { 
     "id": "9", 
     "name": "Comilla", 
     "Subdistricts": [ 
     [ 
      "[13]" 
     ] 
     ] 
    }, 
    { 
     "id": "10", 
     "name": "Feni", 
     "Subdistricts": [ 
     [ 
      "[14]" 
     ] 
     ] 
    }, 
    { 
     "id": "11", 
     "name": "Dhaka", 
     "Subdistricts": [ 
     [ 
      "[15]" 
     ] 
     ] 
    }, 
    { 
     "id": "12", 
     "name": "Narayanganj", 
     "Subdistricts": [ 
     [ 
      "[16]" 
     ] 
     ] 
    }, 
    { 
     "id": "13", 
     "name": "Khulna", 
     "Subdistricts": [ 
     [ 
      "[17]" 
     ] 
     ] 
    }, 
    { 
     "id": "14", 
     "name": "Bagerhat", 
     "Subdistricts": [ 
     [ 
      "[18]" 
     ] 
     ] 
    }, 
    { 
     "id": "15", 
     "name": "Radin Mas SMC", 
     "Subdistricts": [ 
     [ 
      "[19]" 
     ] 
     ] 
    }, 
    { 
     "id": "16", 
     "name": "Jalan Besar GRC", 
     "Subdistricts": [ 
     [ 
      "[20]" 
     ] 
     ] 
    }, 
    { 
     "id": "17", 
     "name": "Mount Batten GRC", 
     "Subdistricts": [ 
     [ 
      "[21]" 
     ] 
     ] 
    }, 
    { 
     "id": "18", 
     "name": "Marine Parade GRC", 
     "Subdistricts": [ 
     [ 
      "[22]" 
     ] 
     ] 
    }, 
    { 
     "id": "19", 
     "name": "West Coast GRC", 
     "Subdistricts": [ 
     [ 
      "[23]" 
     ] 
     ] 
    } 
    ], 
    "Subdistricts": [ 
    { 
     "id": "1", 
     "name": "Dailang", 
     "postcodes": "[736200,404000,100000]" 
    }, 
    { 
     "id": "2", 
     "name": "Changchung", 
     "postcodes": "[864000,504100,905050]" 
    }, 
    { 
     "id": "3", 
     "name": "Chengdu", 
     "postcodes": "[994000,909100,109050]" 
    }, 
    { 
     "id": "4", 
     "name": "Agailjhara", 
     "postcodes": "[8240,8241,8242]" 
    }, 
    { 
     "id": "5", 
     "name": "Amtali Upazella", 
     "postcodes": "[9940,9941,8878]" 
    }, 
    { 
     "id": "6", 
     "name": "Bhola Sadar", 
     "postcodes": "[7230,7741,7752]" 
    }, 
    { 
     "id": "7", 
     "name": "Daulatkhan", 
     "postcodes": "[8650,8871,8880]" 
    }, 
    { 
     "id": "8", 
     "name": "Sitakund", 
     "postcodes": "[4320,4321,4325]" 
    }, 
    { 
     "id": "9", 
     "name": "Satkania", 
     "postcodes": "[4460,4461,4458]" 
    }, 
    { 
     "id": "10", 
     "name": "Port", 
     "postcodes": "[4530,4555,4532]" 
    }, 
    { 
     "id": "11", 
     "name": "Dabal Muring", 
     "postcodes": "[4320,4321,4448]" 
    }, 
    { 
     "id": "12", 
     "name": "Chokaria", 
     "postcodes": "[5320,5321,5432]" 
    }, 
    { 
     "id": "13", 
     "name": "Daudkandi", 
     "postcodes": "[6432,6433,6555]" 
    }, 
    { 
     "id": "14", 
     "name": "Feni sadar", 
     "postcodes": "[3240,3241,3378]" 
    }, 
    { 
     "id": "15", 
     "name": "Dhanmondi", 
     "postcodes": "[2330,2441,2878]" 
    }, 
    { 
     "id": "16", 
     "name": "Narayanganj Sadar", 
     "postcodes": "[6444,6543,6657]" 
    }, 
    { 
     "id": "17", 
     "name": "Batiaghat", 
     "postcodes": "[7780,7781,7778]" 
    }, 
    { 
     "id": "18", 
     "name": "Bagerhat Sadar", 
     "postcodes": "[7450,7451,7458]" 
    }, 
    { 
     "id": "19", 
     "name": "Changi", 
     "postcodes": "[736200,404000,555776]" 
    }, 
    { 
     "id": "20", 
     "name": "Quenstown", 
     "postcodes": "[787899,878788,987789]" 
    }, 
    { 
     "id": "21", 
     "name": "Clementi", 
     "postcodes": "[989778,976543,975432]" 
    }, 
    { 
     "id": "22", 
     "name": "Tuas", 
     "postcodes": "[109901,110900,121345]" 
    }, 
    { 
     "id": "23", 
     "name": "East Region", 
     "postcodes": "[609098,567654,765432]" 
    } 
    ] 
} 

Son DÜZENLEME -

İşte benim JSON dosyasıdır. Seçenekler formuna sahip HTML formu mükemmel yükleniyor, ancak bir nedenden dolayı formum seçenekler göstermiyor.

for(var i=0; i<countries[0].length; i++){ 
     $('#country').append('<option data-tokens="' + countries[0][i]["name"].toLowerCase() +'" value="' + countries[0][i]["id"] + '">' + countries[0][i]["name"] + '</option>'); 
    }; 

HTML kodunu konsolunda yüklendikten sonra - -

<select id="country" class="form-control selectpicker" data-live-search="true" placeholder="" tabindex="-98"> 
    <option value="01" data-tokens="china">China</option> 
    <option value="02" data-tokens="bangladesh">Bangladesh</option> 
    <option value="03" data-tokens="singapore">Singapore</option> 
</select> 

böyle bir fenomen için bir sebep var İşte son kodudur?

+0

değiştirecektirler < '(opsiyon veri belirteçleri eklemek =" '+ ülkeler [0] [i] [name] +' "değer =" '+ i +' "> '+ ülkeler [0] [i] [name] +' '); –

+0

Konsolda herhangi bir hata var ? –

+0

@CarlosDelgado Konsolda hata yok. – ni8mr

cevap

0

Eh, benim sorunum ben kullandım selectpicker sınıf için ortaya çıkan edildi görünüyor. Seçim için arama seçeneklerini oluşturmak için kullanmış olduğum eklenti, seçili bir formda popülasyon seçenekleri için kendi kriterlerine sahiptir. İşte onların belgelerin link - İşte https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerrefresh

benim revize edilir JS kod -. $ ('# Ülke') `ye

(function() { 
    var url = "dummy.json", 
    countries = [], 
    divisions = [], 
    districts = [], 
    subdistricts = [], 
    $.getJSON(url) 
    .done(function(data) { 
     countries.push(data['Country']); 
     divisions.push(data['Divisions']); 
     districts.push(data['Districts']); 
     subdistricts.push(data['Subdistricts']); 

     var option_string = ''; 

     for(var i=0; i<countries[0].length; i++){ 
      option_string += '<option data-tokens="' + countries[0][i]["name"].toLowerCase() +'" value="' + countries[0][i]["id"] + '">' + countries[0][i]["name"] + '</option>'; 
     } 

     $('#country').empty().append(option_string).change(function(){ 
      var selected = $(this).val(); 
      console.log(selected); 
     }).selectpicker('refresh'); 

     }); 
})(); 
1

Değişim için döngü:

for(var i=0; i<countries[0].length; i++){ 
    $('#country').append('<option data-tokens=' + countries[0][i].name +'value=' + i + '>' + countries[0][i].name + '</option>'); 
}; 
+0

** ülkeleri arasında [0] [i] .name ** ve ** ülkeleri [0] [i] ["name"] ** arasında bir sözdizimi farkı yoktur. – ni8mr

+0

Örneğinizde çift tırnak içinde adınız yok ... –

+0

Daha sonra ekledim ve aynı soruna sahip oldum. – ni8mr

İlgili konular