I have form like this:
<form action="index.php" method="get" name="gizi">
<div id="itemRows">
<input onclick="addRow(this.form);" type="button" value="Add row" />
</div>
</form>
And this is my script (.. If I click button "add row", it will add new row....)
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<div class="rowNum'+rowNum+'">Select Manufacture: <select name="jenis" class="jenis"><option selected="selected">--Select manufacture--</option><option value="1">Toyota</option><option value="2">Nissan</option><option value="3">Honda</option></select> Select Car: <select name="bahan" class="bahan"><option selected="selected">--Select Car--</option></select> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></div>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
I have other script,.. I use this to populate other select option based on ajax,..Example: I choose Toyota (in class="jenis"),.. then ajax will populate select option in class="bahan"
$(document).ready(function() {
$(".jenis").change(function() {
var id = $(this).val();
var dataString = 'jenis=' + id;
var $this = $(this);
$.ajax({
type: "POST",
url: "ajax_menu.php",
data: dataString,
cache: false,
success: function(html) {
$this.siblings(".bahan").html(html);
}
});
});
});
Now the fact is when I select option in class="jenis" ,.. ajax doesn't populate other option in class="bahan"......
Since the select boxes are created dynamically, you need to use event delegation
$(document).ready(function () {
$('#itemRows').on('change', ".jenis", function () {
var id = $(this).val();
var dataString = 'jenis=' + id;
var $this = $(this);
$.ajax({
type: "POST",
url: "ajax_menu.php",
data: dataString,
cache: false,
success: function (html) {
$this.siblings(".bahan").html(html);
}
});
});
});
Demo: Fiddle
Its not working because you are dynamically creating .jenis options and binding the event on document.ready. You can do two things:
<select name="jenis" class="jenis" onclick="theonclickhandler"> should work.
Bind the event with javascript right after the select is pushed in the document.
You have a issue of event delegation, because in your existing event is applied on an elem which was not availabled at the time of doc ready so that won't get the direct event this way.
To overcome this issue you have to put your code in an event delegation manner. You can delegate the event to the existing static parent which was available or directly to the document itself because document always availble:
$(document).ready(function() {
$("#itemRows").on("change", ".jenis", function() {
var id = $(this).val();
var dataString = {"jenis" : id};
var $this = $(this);
$.ajax({
type: "POST",
url: "ajax_menu.php",
data: dataString,
cache: false,
success: function(html) {
$this.siblings(".bahan").html(html);
}
});
});
});