İlçeleri checkbox için de listeletmek
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);
})
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.