Question

我有下一个代码：

<tr>
  <td>
    <select class="select_big" name="additional_field" id="<?=$field['id'];?>" required>
      <option value="0">Выберите значение</option>
      ...
  </td>
</tr>
<tr>
  <td>
    <select class="select_big" name="additional_field" id="<?=$field['id'];?>" required>
      <option value="0">Выберите значение</option>
      ...
  </td>
</tr>
<tr>
  <td>
    <select class="select_big" name="additional_field" id="<?=$field['id'];?>" required>
      <option value="0">Выберите значение</option>
      ...
  </td>
</tr>
<tr>
  <td>
    <select class="select_big" name="additional_field" id="<?=$field['id'];?>" required>
      <option value="0">Выберите значение</option>
      ...
  </td>
</tr>

当我选择第二个“select”元素时，我需要禁用所有下一个元素。如果我选择1需要禁用3和4，如果我选择2我需要禁用4。元素的数量可能不同。

如何在选择旁边获取所有元素？

我接下来尝试：

<script type="text/javascript">
  $("[name=additional_field]").change(function(e) {
    field_data = '#' this.id.replace(/[* .]/g, "\\$&");
      $(field_data).parent().parent().nextAll().each(function(i) {
        console.log($(this)('[name=additional_field]'));
      });
  });
</script>

但我收到下一个错误：未捕获的TypeError：对象不是函数

请帮帮我。

Answer 1

我认为你可以更简单地做到这一点而不会混淆父节点的遍历：

var $sel = $('.select_big').change(function() {
    $sel.filter(':gt(' + $sel.index(this) + ')').prop('disabled', +$(this).val());
});

演示：http://jsfiddle.net/VFcF9/

如果您选择默认选项，它也会重新启用选择框。

Answer 2

你得到的错误是因为这一行：

$(this)('[name=additional_field]')

第一部分$(this)返回一个jQuery对象，该对象不是一个函数，所以你不能用更多的括号来跟随它。

至于你要求禁用所有以下选择元素，可能是：

$("[name=additional_field]").change(function(e) {
  $(this).closest("tr").nextAll("tr").find("[name=additional_field]").prop("disabled", true);
});

Answer 3

This should do it

$("[name=additional_field]").change(function(e) {

  var f = $(this).closest('tr')             //find the closest parent tr
                 .nextAll('tr')             //find all tr that follows
                 .find('select.select_big') //from them, get all select

  //f should be all the selects the follow what changed

});

选择下一个选定的元素

3 个答案: