我需要一个HTML动态表单,可以在其中添加带有两个选择框的多个表字段。但是,选择框2取决于选择框1。我编写了JQuery代码,该代码对于第一行工作正常,但对于第二行(新添加的)则根本不工作。
我的jquery代码以添加新行:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
console.log(i);
$("#add").click(function(){
i++;
console.log(i);
$('#inv_table').append('<tr id="row'+i+'"><td><select class="form-control custom-select" id="product'+i+'" name="product_id"><option>Select Product</option> @foreach($products as $product)<option value="{{$product->id}}">{{$product->product_name}}</option>@endforeach </select></td><td><input type="text" name="price[]" value=""/></td><td><select class="form-control custom-select" id="gst'+i+'" name="gst[]"><option value=""></option> </select></td><td><input id="'+i+'" type="submit" name="remove" value="Remove" class="btn btn-danger btn-sm btn_remove" ></td></tr>')
});
$(document).on('click','.btn_remove',function(){
var button_id = $(this).attr("id");
console.log(button_id);
$('#row'+button_id+'').remove();
})
});
</script>
我的动态选择框的jQuery代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#product').on('change', function(e){
console.log(e);
var id = e.target.value;
console.log(id);
$.get('ajax-unit/'+id, function(data){
console.log(data.tax);
$('#gst').empty();
$('#gst').append('<option value="data.tax">'+data.tax+'</option>');
});
});
});
</script>
请帮助我。...
谢谢。