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>

laravel php javascript

@echosk

64 Kontribusi 1 Poin

Diperbarui 5 tahun yang lalu

3 Jawaban:

$('select[name="kab_kot_[]"]')

karena dia cari element select dengan attribut name="kab_kot" tidak spesifik kab_kot_1 atau yang lainya

@bgsind

5 Kontribusi 3 Poin

Dipost 5 tahun yang lalu

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

@echosk

64 Kontribusi 1 Poin

Dipost 5 tahun yang lalu

Tanggapan

kalau gitu saat loop ngisi selectboxnya,milih selectboxya pakai id aja jangan pakai name

@bgsind

maksudnya bagaimana gan?

@echosk

saat mau ngasih nilai ke comboboxnya jangan pakai $('select[name="kab_kot_[]"]') tapi pakai id aja

@bgsind

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>

                var target = $(&quot;#kab_kot_&quot;+$(a).attr(&#039;id-kota&#039;));

                target.empty();
                target.append(&#039;&amp;lt;option value=&quot;&quot;&amp;gt;&amp;lt;/option&amp;gt;&#039;);
                $.each(data, function(key, value) {
                    if(key!=12){
                        target.append(&#039;&amp;lt;option value=&quot;&#039;+ key +&#039;&quot;&amp;gt;&#039;+ value +&#039;&amp;lt;/option&amp;gt;&#039;);   
                    }
                });
            }
        });

</script> </pre>

@bgsind

5 Kontribusi 3 Poin

Dipost 5 tahun yang lalu

Tanggapan

makasih gan udah solve

@echosk

Kelas Premium! Belajar Javascript untuk website

Multiple combobox berjenjang

Kelas Premium!
Belajar Javascript untuk website