Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Loop form select option with ajax
saya memiliki 2 form select option yang diulang di looping sebnyak keinginan user, dimana option pada select option kedua akan berdasarkan pada data yang dipilih pada select option yang pertama. ini link contoh tampilannya <a href='https://drive.google.com/file/d/1pu0QKIhcBbAz-x3X7t9HlYGg_ziiKh07/view?usp=sharing'>https://drive.google.com/file/d/1pu0QKIhcBbAz-x3X7t9HlYGg_ziiKh07/view?usp=sharing</a> pada contoh diatas form di loop sebnyak 2 kali
ini sintax form html saya
<table>
<form>
<?php
for($i=1;$i<=$jml;$i++){?>
<tr>
<td>Jenis CI</td>
<td><select class="form-control" name="jenis2[]"id="jenis2[]" required>
<?php foreach($relasi as $row) { ?>
<option value="<?php echo $row->idJenisCI;?>"><?php echo $row->namaJenisCI;?>
</option><?php } ?>
</select>
</td>
</tr>
<tr>
<td>Nama CI</td>
<td><select class="id2 form-control" name="id2[]" required></select></td>
</tr>
<?php }?>
<tr align="center">
<td colspan="2"><input class="tombol" type="submit" name="submit" value="Simpan"></td>
</tr>
</form>
</table>
lalu ini sintax javascript dan ajax saya
<script type="text/javascript">
$(document).ready(function(){
$('#jenis2').change(function(){
var idJenisCI=$(this).val();
$.ajax({
url : "<?php echo base_url();?>index.php/C_ProyekAkhir/option",
method : "POST",
data : {idJenisCI: idJenisCI},
async : false,
dataType : 'json',
success: function(data){
var html = '';
var i;
for(i=0; i<data.length; i++){
html += '<option value="'+data[i].idCI+'-'+data[i].namaCI+'">'+data[i].namaCI+'</option>';
}
$('.id2').html(html);
}
});
});
});
</script>
jadi karena di looping variabel pada select option menjadi array, saya bingung bagaimana cara mengambil data array tersebut dan di masukkan pada ajax untuk mengisi option pada select option kedua untuk berdasarkan pada setiap select option pertama.
1 Jawaban:
coba pake ini gan <a href='http://api.jquery.com/jquery.each/'>http://api.jquery.com/jquery.each/</a>
Tanggapan
ada yg lainnya gk, soalnya gk membantu