选择所选元素旁边的元素

Question

I have next code:

<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>

When I select the second "select" element, I need to disable all the next one. If I select 1 need to disable 3 and 4, if I select 2 I need to disable only 4. Count of element could be different.

How I can get all elements next the select?

I try next:

<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>

But I receive next error: Uncaught TypeError: object is not a function

Help me please.

Answer 1

I think you can do it simpler without confusing traversal of the parent nodes:

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

Demo: http://jsfiddle.net/VFcF9/

It will also reenable selectboxes if you select default option back.

Answer 2

The error you were getting is because of this line:

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

The first part, $(this) , returns a jQuery object, and that object is not a function so you can't follow it with more parentheses.

As for your requirement to disable all of the following select elements, perhaps:

$("[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

});