Question

测试用例是表格中的表格。行是动态生成的。现在用简单的html + javascript我就是这样，

<tr>
    <td>
        <select id="brand_1" name="brand[]" onchange="brandChanged(1)">
            //some options
        </select>
    </td>
    <td>
        <select id="model_1" name="model[]">
            <option>Default Value</option>
        </select>
    </td>
</tr>
<tr>
    <td>
        <select id="brand_2" name="brand[]" onchange="brandChanged(2)">
            //some options
        </select>
    </td>
    <td>
        <select id="model_2" name="model[]">
            <option>Default Value</option>
        </select>
    </td>
</tr>

当触发brandChanged(x)方法时，它会从另一个带有ajax请求的文件中获取选项，并将它们添加到model_x select元素。

一切正常，但我的问题是如何用jQuery做到这一点？我的意思是将.change()绑定到这些输入元素的方式我也不喜欢用name_id方式命名id。有没有更好的设计来解决这个问题？

Answer 1

1）为所有人添加一个公共类。

2）删除内联onchange事件并编写jquery事件

3）您可以将值放在html5数据属性中：

<select id="brand_1" name="brand[]" class="brand" data-brand="1">
            //some options
</select>

<select id="brand_2" name="brand[]" data-brand="2">
           //some options
</select>

并在课堂上写下事件：

$(".brand").change(function() {

  var brand = $(this).data("brand");
  // do something

});

Answer 2

这可能是另一种方法。 http://jsfiddle.net/thecbuilder/5Lkfh558/

.on()是因为您提到动态生成tr。
在没有id s

<强> JS

$(".mainTable").on("change", ".brand", function () {
    var dataFromAjax = callAjax($(this).data("idx"));
    $(this).parent().siblings().eq(0).find(".model").html($("<option>DATA from AJAX</option>"));
});

将.change添加到多个select元素

2 个答案: