jQuery更改多个选择选项的事件

Question

我有多个select。

第一个select工作，但当我尝试第二个jQuery不工作。

<select class="selectProduct" name="product_title[]" style="width:200px;">
@foreach($product as $value)
<option value="{{$value->id}}">{{$value->title}}</option>
@endforeach
</select>
<input type="text" name="sku[]" placeholder="Code" id ="sku" style="width:50px;" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id ="qty" class="qty" style="width:50px;" />
<input type="text" name="price[]" placeholder="Price" id ="price" class="price"style="width:50px;" />
<input type="text" name="price[]" placeholder="Sale Price" id ="price" class="price"style="width:100px;" />
<br><a href="javascript:void(0);" class="add_button" title="Add field">Add</a>

这是第二个具有相同类的select。第一个是致力于改变。但是当我点击第二个select。jQuery不工作

<select class="selectProduct" name="product_title[]" style="width:200px;">
@foreach($product as $value)
<option value="{{$value->id}}">{{$value->title}}</option>
@endforeach
</select>
<input type="text" name="sku[]" placeholder="Code" id ="sku" style="width:50px;" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id ="qty" class="qty" style="width:50px;" />
<input type="text" name="price[]" placeholder="Price" id ="price" class="price"style="width:50px;" />
<input type="text" name="price[]" placeholder="Sale Price" id ="price" class="price"style="width:100px;" />
<br><a href="javascript:void(0);" class="add_button" title="Add field">Add</a>

这是jQuery

$(document).ready(function(){
$('.selectProduct').change(function(){
var idSize=$(this).val();
alert(idSize);
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
if (idSize==""){
return false;
}
$.ajax({
url:'{{route("product-price")}}',
type: 'GET',
data: {idSize: idSize},
beforeSend: function (request) {
return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf-token']").attr('content'));
},
success: function (response) {
var arr=response.split('#');
$('.price').html("$"+arr[0]+'.00');
$('.price').val(arr[0]);
$('input[name=attribute_id]').val((arr[3]));
$('.code').val((arr[4]));
},
error: function (err) {
console.log(err);
alert("Something Went Wrong, Please check again");
}
});
});
});

Answer 1

当您希望在这样的字段中检测on change事件时，您应该通过以下示例来执行:

$(document).on('change', '.selectProduct', function(e){
var $this = $(this),
$value = $this.val();

/* Do anthing you want */
});

这将识别任何具有.selectProduct类的选择框。

你必须查看document中所有的复选框。

$this变量返回当前选择框。

编辑:

更多信息在这里:https://stackoverflow.com/a/1207393/2592415