多个下拉列表的单个 onchange ajax
Single onchange for multiple dropdown ajax
我是 jquery 的新人。我想为多个下拉菜单制作单个 Onchange。我试过 for 循环但没有用。我一直在搜索但没有找到解决方案。如何使这段代码看起来简单?感谢您的帮助
$(document).on('change', '#medicine1', function(){
var medicine=$(this).val();
$.ajax({
type : "POST",
url : "<?php echo base_url('example/product')?>",
dataType : "JSON",
data : {medicine: medicine},
cache:false,
success: function(data){
$.each(data,function(medicine, stock, unit){
$('#stock1').val(data.stock);
$('#unit1').val(data.unit);
});
}
});
return false;
});
$(document).on('change', '#medicine2', function(){
var medicine=$(this).val();
$.ajax({
type : "POST",
url : "<?php echo base_url('example/product')?>",
dataType : "JSON",
data : {medicine: medicine},
cache:false,
success: function(data){
$.each(data,function(medicine, stock, unit){
$('#stock2').val(data.stock);
$('#unit2').val(data.unit);
});
}
});
return false;
});
您正在寻找的技术称为“不要重复自己”或“DRY”。为此,您可以在分配了单个事件处理程序的元素上使用 common 类 。然后您可以在事件处理程序中使用 this
关键字来引用引发事件的单个元素。
我能看到的唯一逻辑差异是您在 AJAX 请求的回调中影响的元素的 id
属性。
在这种情况下,最好使用DOM 遍历来查找相关元素。那就是 closest()
、find()
、siblings()
等方法。如果出于某种原因,这是不可能的,那么您可以在 [=18= 上使用 data
属性] 来瞄准他们。由于您没有提供 HTML 来查看如何遍历 DOM,这里是后者的示例:
<select class="medicine" data-stock="#stock1" data-unit="#unit1">
<option>Foo</option>
<option>Bar</option>
</select>
<select class="medicine" data-stock="#stock2" data-unit="#unit2">
<option>Fizz</option>
<option>Buzz</option>
</select>
$(document).on('change', '.medicine', function() {
var $select = $(this);
var medicine = $select.val();
$.ajax({
type: "POST",
url: "<?php echo base_url('example/product')?>",
dataType: "JSON",
data: { medicine: medicine },
cache: false,
success: function(data) {
$.each(data, function(medicine, stock, unit) {
$($select.data('stock')).val(data.stock);
$($select.data('unit')).val(data.unit);
});
}
});
});
还值得注意的是,在循环中重复设置单个元素的 val()
有点奇怪。它只会显示迭代中最后一项的值。
我是 jquery 的新人。我想为多个下拉菜单制作单个 Onchange。我试过 for 循环但没有用。我一直在搜索但没有找到解决方案。如何使这段代码看起来简单?感谢您的帮助
$(document).on('change', '#medicine1', function(){
var medicine=$(this).val();
$.ajax({
type : "POST",
url : "<?php echo base_url('example/product')?>",
dataType : "JSON",
data : {medicine: medicine},
cache:false,
success: function(data){
$.each(data,function(medicine, stock, unit){
$('#stock1').val(data.stock);
$('#unit1').val(data.unit);
});
}
});
return false;
});
$(document).on('change', '#medicine2', function(){
var medicine=$(this).val();
$.ajax({
type : "POST",
url : "<?php echo base_url('example/product')?>",
dataType : "JSON",
data : {medicine: medicine},
cache:false,
success: function(data){
$.each(data,function(medicine, stock, unit){
$('#stock2').val(data.stock);
$('#unit2').val(data.unit);
});
}
});
return false;
});
您正在寻找的技术称为“不要重复自己”或“DRY”。为此,您可以在分配了单个事件处理程序的元素上使用 common 类 。然后您可以在事件处理程序中使用 this
关键字来引用引发事件的单个元素。
我能看到的唯一逻辑差异是您在 AJAX 请求的回调中影响的元素的 id
属性。
在这种情况下,最好使用DOM 遍历来查找相关元素。那就是 closest()
、find()
、siblings()
等方法。如果出于某种原因,这是不可能的,那么您可以在 [=18= 上使用 data
属性] 来瞄准他们。由于您没有提供 HTML 来查看如何遍历 DOM,这里是后者的示例:
<select class="medicine" data-stock="#stock1" data-unit="#unit1">
<option>Foo</option>
<option>Bar</option>
</select>
<select class="medicine" data-stock="#stock2" data-unit="#unit2">
<option>Fizz</option>
<option>Buzz</option>
</select>
$(document).on('change', '.medicine', function() {
var $select = $(this);
var medicine = $select.val();
$.ajax({
type: "POST",
url: "<?php echo base_url('example/product')?>",
dataType: "JSON",
data: { medicine: medicine },
cache: false,
success: function(data) {
$.each(data, function(medicine, stock, unit) {
$($select.data('stock')).val(data.stock);
$($select.data('unit')).val(data.unit);
});
}
});
});
还值得注意的是,在循环中重复设置单个元素的 val()
有点奇怪。它只会显示迭代中最后一项的值。