v2.5.2
Giriş yap

İlçeleri checkbox için de listeletmek

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

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);
  
})
php javascript
Cevap yaz
Cevaplar (8)
ebykdrms
893 gün önce

name ve class bölümlerini doğru şekilde eklemişsiniz.
value ekleme işini label'i clone'ladığımız yerde yapabiliriz.

$item.find("span").text(sehir.ilceleri[i]); satırının hemen altına
$item.find("input[type=checkbox]").val(sehir.ilceleri[i]); satırını ekleyebilirsiniz.

codepen.io pen'ini de düzenledim.

1
#010345
emmir2
851 gün önce

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

0
#010737
emmir2
893 gün önce

@ebykdrms teşekkürler hocam eline sağlık

1
#010346
emmir2
893 gün önce

@ebykdrms hocam value değerini nası ekleyebiliriz İNSERT yaptıramıyorum value değeri boş olduğu için

const $ilceItem = $("<label class=checkbox><input class=checkbox__input type=checkbox name=ilce[] ><span class=checkbox__inner><span class=checkbox__tick></span><span class=checkbox__text><p class=checkbox__text></p></span></label>");
0
#010344
emmir2
894 gün önce

yardım edecek kimse yok muu

0
#010336
emmir2
895 gün önce

Bu şekil de div içine yazdırabiliyorum ama devreye <input type="checkbox"> girince sadece inputu çoğaltıyor veriyi vermiyor
sade bir şekil de <input> yazarsam veriyi yazıyor yardımlarınızı bekliyorum

<div class="field__wrap" id="Ilceler" >Önce İl Seçiniz</div>

function search(nameKey, myArray){
    for (var i=0; i < myArray.length; i++) {
        if (myArray[i].plaka == nameKey) {
            return myArray[i];
        }
    }
}
$( document ).ready(function() {
  $.each(data, function( index, value ) {
    $('#Iller').append($('<option>', {
        value: value.plaka,
        text:  value.il
    }));
  });
  $("#Iller").change(function(){
    var valueSelected = this.value;
    if($('#Iller').val() > 0) {
      $('#Ilceler').html('');
      $('#Ilceler').append($('<div>', {
        value: 0
      }));
      $('#Ilceler').prop("disabled", false);
      var resultObject = search($('#Iller').val(), data);
      $.each(resultObject.ilceler, function( index, value ) {
        $('#Ilceler').append($('<div>', {
            value: 0,
            text:value
        }));
      });
      return false;
    }
    $('#Ilceler').prop("disabled", true);
  });
});
0
#010332
parzemisis
895 gün önce

Merhaba zamanında yapmak istediğniz işlemin bir benzerini yapmıştım.
Size o zaman önce seksen bir ili hızlıca veri tabanına kaydettirecek bir Php script yazmıştım. İlleri kaydetikten sonra scripti özelleştirdim ve ilçe kaydetmek için kullandım.
İlçeleri illerin id'lerine göre kaydettim.
Daha sonra verileri veri tabanından çektim.

0
#010331