jquery - 循环遍历具有不同数组键的选择字段数组答案

【问题标题】：jquery - Loop through array of select fields with different array keysjquery - 循环遍历具有不同数组键的选择字段数组
【发布时间】：2018-08-03 13:45:57
【问题描述】：

我正在动态生成一些选择输入，它遵循这个结构

<select id="OrderType_orderItem_0_product" name="OrderType[orderItem][0][product]" class="form-control">,

<select id="OrderType_orderItem_1_product" name="OrderType[orderItem][1][product]" class="form-control">

等等。

我需要在 .change 上对每个生成的选择进行 ajax 发布，我该怎么做？

现在我有这个，但它显然只适用于 id 0 的第一个选择：

$(document).ready(function () {
        $('[name="OrderType[orderItem][0][product]"]').change(function(){
           var val = $(this).val();
           $.ajax({
                type: "POST",
                url: "myurl" + val,
                success: function(data) {

                }
            });
            return false;
        });

【问题讨论】：

删除Javascript标签。
已经有一段时间了，但我相信要将事件绑定到动态创建的元素上，您必须使用delegate。
取决于它们的创建时间，但这是一个有效点。这些元素是在服务器还是客户端创建的？
@DrewKennedy 代表工作。我做了 $("body").on("change", "select[name^='[OrderType]']", function(){ //stuff });

标签： jquery arrays ajax loops

【解决方案1】：

这样做的一种方法是给他们一个共享类

<select id="OrderType_orderItem_0_product" name="OrderType[orderItem][0][product]" class="form-control myClass">,

<select id="OrderType_orderItem_1_product" name="OrderType[orderItem][1][product]" class="form-control myClass">

然后将此事件分配给该类：

$(document).ready(function () {
        $('.myClass').change(function(){
           var val = $(this).val();
           $.ajax({
                type: "POST",
                url: "myurl" + val,
                success: function(data) {

                }
            });
            return false;
        });

因为我们将这个元素用于 val，它将使用触发事件的元素。

【讨论】：

【解决方案2】：

您只需要在名称以OrderType 开头的任何选择输入的change 上触发函数

试试这个例子：

$(document).ready(function () {

  $("select[name^='OrderType']").change(function(){

           var val = $(this).val();

           $.ajax({
                type: "POST",
                url: "myurl" + val,
                success: function(data) {

                }
            });
            return false;
  });

});

【讨论】：

这只适用于第一次选择，你知道为什么吗？
不行，这里是一个例子，请检查控制台jsfiddle.net/xpvt214o/544521
其实我不得不这样做： $("body").on("change", "select[name^='[OrderType]']", function(){});因为 jquery 不能在动态添加的元素中工作，但是使用这个委托方法它可以工作。