Question

HTML：

<tr><td>
    <select id="fruits" name = "fruits[]">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="mango">Mango</option>
        <option value="grape">Grape</option>
        <option value="watermelon">watermelon</option>
    </select>
</td>
<td>
<input type="text" name="color[]" />
</td>
<tr>
<td>
    <select id="fruits" name = "fruits[]">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="mango">Mango</option>
        <option value="grape">Grape</option>
        <option value="watermelon">watermelon</option>
    </select>
</td>
<td>
<input type="text" name="color[]" />
</td></tr>

js：

$(function() {
    $('#fruits').change(function(e) {
        alert("a");
        var selected = $(e.target).val();
        console.dir(selected);
    }); 
});

用户可以添加无限选择选项面板。

我想处理哪个选项更改。

例如，如果更改了第二个选择选项，我想更改第二个选择选项＆＃39;输入颜色。我怎么处理它们？

Answer 1

1）Id必须是唯一的。将其更改为类

<select class="fruits" name = "fruits[]">

现在您可以使用this来检测当前对象

$(function() {
    $('.fruits').change(function(e) {
        alert("a");
        var selected = $(e.target).val();
        console.dir(selected);
        $(this).css("background-color", "colorName"); // or any css property
    }); 
});

Answer 2

如果您有多个元素，请使用class而不是ID。

＆＃13;

$(function() {
  $('.fruits').change(function(e) {
    var selected = $(this).val();
    alert(selected);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
  <td>
    <select class="fruits" name="fruits[]">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="mango">Mango</option>
      <option value="grape">Grape</option>
      <option value="watermelon">watermelon</option>
    </select>
  </td>
  <td>
    <input type="text" name="color[]" />
  </td>
  <tr>
    <td>
      <select class="fruits" name="fruits[]">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="mango">Mango</option>
        <option value="grape">Grape</option>
        <option value="watermelon">watermelon</option>
      </select>
    </td>
    <td>
      <input type="text" name="color[]" />
    </td>
  </tr>
</table>

＆＃13;

Answer 3

为两个选择添加一个class属性。

然后你可以在你的jQuery选择器中使用它。因为ID应该是唯一的。

即。如果我给选择一个属性class =＆＃34; fruit＆＃34;然后我可以使用以下选择器。

$(".fruit").change(function() {});

多个选择更改事件句柄

3 个答案: