v2.5.2
Giriş yap

İlçeleri checkbox için de listeletmek

emmir2
547 defa görüntülendi ve 1 kişi tarafından değerlendirildi

merhabalar select için de il ve ilçe listelettiriyorum
Örnek : https://codepen.io/ebykdrms/pen/zYRJKmw
benim yapmak istediğim ilçeleri checbox için de listeletip istediği kadar seçtirmek bunu nasıl yapabilirim

<section>
  <select class="field__input" id="Iller" name="sehir">
     <option value="0" disabled selected>İl seçiniz...</option>
  </select>
  <select class="field__input" id="Ilceler" name="ilce" disabled>
     <option value="0" disabled selected>İlçe seçiniz...</option>
  </select>
  <button data-role="save" disabled>Kaydet</button>
</section>
function setSelectBoxes(selectedData) {
  $("select[name=sehir]").val(selectedData.plaka).trigger("change");  
  $("select[name=ilce]").val(selectedData.ilce).trigger("change");
}

var data = [
  {
    "il": "Adana",
    "plaka": 1,
    "ilceleri": [
      "Aladağ",
      "Ceyhan",
      "Çukurova",
      "Feke",
      "İmamoğlu",
      "Karaisalı",
      "Karataş",
      "Kozan",
      "Pozantı",
      "Saimbeyli",
      "Sarıçam",
      "Seyhan",
      "Tufanbeyli",
      "Yumurtalık",
      "Yüreğir"
    ]
  },
  {
    "il": "Samsun",
    "plaka": 55,
    "ilceleri": [
      "19 Mayıs",
      "Alaçam",
      "Asarcık",
      "Atakum",
      "Ayvacık",
      "Bafra",
      "Canik",
      "Çarşamba",
      "Havza",
      "İlkadım",
      "Kavak",
      "Ladik",
      "Salıpazarı",
      "Tekkeköy",
      "Terme",
      "Vezirköprü",
      "Yakakent",
    ]
  }
]

$(document).ready(function(){
  const $sehir_select = $("select[name=sehir]");
  const $ilce_select = $("select[name=ilce]");
  const $save_button = $("button[data-role=save]");
  
  $sehir_select.find("option").eq(0).siblings().remove();
  for(let i=0; i<data.length; i++){
    $sehir_select.append(`<option value="${data[i].plaka}">${data[i].il}</option>`);
  }
  
  $sehir_select.on("change",function(){
    const target = $(this).val();
    const targetData = data.find(function(x){return x.plaka==target});
    if(!targetData) { alert("Bu ile ait ilçe kaydı bulunamadı."); return; }
    $ilce_select.find('option').eq(0).prop("selected",true).siblings().remove();
    $save_button.prop("disabled",true);
    for(let i=0; i<targetData.ilceleri.length; i++) {
      $ilce_select.append(`<option value="${targetData.ilceleri[i]}">${targetData.ilceleri[i]}</option>`);
    }
    $ilce_select.prop("disabled",false);
  });
  
  $ilce_select.on("change", function(){
    const selectedSehir = $sehir_select.val();
    const selectedIlce = $(this).val();    
    if(selectedIlce && selectedIlce!="0") $save_button.prop("disabled",false);
  })
  
   // Seçim yaptıralım.
  var selectedData = {
    il: "Adana",
    plaka: 1,
    ilce: "Ceyhan"
  };
  setSelectBoxes(selectedData);
  
})
emmir2
882 gün önce

hocam bu seçimi 5 ile sınırlandırabilir miyiz @ebykdrms