多个下拉ajax的单个onchange

Posted

技术标签:

【中文标题】多个下拉ajax的单个onchange【英文标题】:Single onchange for multiple dropdown ajax 【发布时间】:2018-11-11 19:22:03 【问题描述】:

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

【问题讨论】:

【参考方案1】:

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

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

在这种情况下,最好使用 DOM 遍历来查找相关元素。那是诸如closest()find()siblings() 等方法。如果出于某种原因,这是不可能的,那么您可以使用select 上的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() 有点奇怪。它只会显示迭代中最后一项的值。

【讨论】:

以上是关于多个下拉ajax的单个onchange的主要内容,如果未能解决你的问题,请参考以下文章

s-s-rS 单个下拉列表中的多个参数

如何通过ajax更改多个下拉值?

Excel(VBA)下拉列表单个单元格中的多个值

Wordpress 过滤多个下拉分类以通过 ajax 显示自定义字段

当单个表单中有多个下拉字段时,如何在 JQuery 中为选择标记引用选择器?

如何在具有 Ajax 的单个表单中使用多个提交按钮 [关闭]