Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Multiple combobox berjenjang
mohon bantuannya gan ane punya listing seperti ini, kronologis: 1. Data provinsi bisa nampil 2. misal pada saat dipilih nama provinsi_1 seharusnya data kota hanya nampil di kab_kot_1, tpi ini tampil di seluruh combo box kab_kot_[] 3. mohon dikoreksi gan kesalahan penulisannya ada dmn?
<select class='form-control' name='provinsi_1' id='provinsi1' onFocus='provinsi(this)'onChange='kota(this)'\>
<option></option>
</select>
<select class='form-control' name='kab_kot_1' id='kab_kot_1'>
<option></option>
</select>
<select class='form-control' name='provinsi_2' id='provinsi2' onFocus='provinsi(this)'onChange='kota(this)'\>
<option></option>
</select>
<select class='form-control' name='kab_kot_2' id='kab_kot_2'>
<option></option>
</select>
<select class='form-control' name='provinsi_3' id='provinsi3' onFocus='provinsi(this)'onChange='kota(this)'\>
<option></option>
</select>
<select class='form-control' name='kab_kot_3' id='kab_kot_3'>
<option></option>
</select>
<select class='form-control' name='provinsi_4' id='provinsi4' onFocus='provinsi(this)'onChange='kota(this)'\>
<option></option>
</select>
<select class='form-control' name='kab_kot_4' id='kab_kot_4'>
<option></option>
</select>
<script type="text/javascript">
function provinsi(a){
$.ajax({
url: '/provinsi',
type: "GET",
dataType: "json",
success:function(data){
console.log(data);
$('select[name="provinsi_[]"]').empty();
$('select[name="provinsi_[]"]').append('<option value=""></option>');
$.each(data, function(key, value) {
if(key!=12){
$('select[name="provinsi_[]"]').append('<option value="'+ key +'">'+ value +'</option>');
}
});
}
});
}
function kota(a){
kot_kab=a.value;
//$("select").closest("div").closest("div").closest("div").closest("div").closest("div").closest("div").css({"color": "red", "border": "2px solid red"});;
$.ajax({
url: '/kabupaten/'+kot_kab,
type: "GET",
dataType: "json",
success:function(data){
console.log(data);
$('select[name="kab_kot_[]"]').empty();
$('select[name="kab_kot_[]"]').append('<option value=""></option>');
$.each(data, function(key, value) {
if(key!=12){
$('select[name="kab_kot_[]"]').append('<option value="'+ key +'">'+ value +'</option>');
}
});
}
});
}
</script>
3 Jawaban:
$('select[name="kab_kot_[]"]')
karena dia cari element select dengan attribut name="kab_kot" tidak spesifik kab_kot_1 atau yang lainya
iya gan penambahannya secara dinamis sebenarnya, itu ada tombol dan hapus buat nambah combobox provisi sama kota. sengaja ane ga tulis jdi 1 function javascript bisa dipake dibanyak combobox
saat mau ngasih nilai ke comboboxnya jangan pakai $('select[name="kab_kot_[]"]') tapi pakai id aja <pre> <select class='form-control' name='provinsi_1' id='provinsi1' onFocus='provinsi(this)'onChange='kota(this)' id-kota="1"&gt; <option></option>
<script> function kota(a){ kot_kab=a.value; //$("select").closest("div").closest("div").closest("div").closest("div").closest("div").closest("div").css({"color": "red", "border": "2px solid red"});; $.ajax({ url: '/kabupaten/'+kot_kab, type: "GET", dataType: "json", success:function(data){ console.log(data);
var target = $("#kab_kot_"+$(a).attr('id-kota'));
target.empty();
target.append('&lt;option value=""&gt;&lt;/option&gt;');
$.each(data, function(key, value) {
if(key!=12){
target.append('&lt;option value="'+ key +'"&gt;'+ value +'&lt;/option&gt;');
}
});
}
});
</script> </pre>
Tanggapan
makasih gan udah solve