Question

我是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;
            });

Answer 1

您正在寻找的技术称为“不要重复自己”或“干”。要实现此目的，您可以在为单个事件处理程序分配的元素上使用公共类。然后，您可以使用事件处理程序中的this关键字来引用引发事件的单个元素。

我能看到的唯一逻辑差异是您在AJAX请求的回调中影响的元素的id属性。

在这种情况下，最好使用DOM遍历来查找相关元素。这是closest()，find()，siblings()等方法。如果由于某种原因，这是不可能的，那么您可以在{{1}上使用data属性定位他们。由于您没有提供HTML以查看如何遍历DOM，因此这是后者的示例：

select

<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); }); } }); });有点奇怪。它只会显示迭代中最后一项的值。

单个onchange用于多个下拉列表ajax

1 个答案: