javascript - 将 .change 添加到多个选择元素

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 选择元素。

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

Answer 1

1) 为所有人添加一个公共(public)类。

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

});