选择下选择

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> 

当我选择第二个“中选择”元素，我需要禁用所有的下一个。 如果我选择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> 

但是我收到一个错误： 遗漏的类型错误：对象不是一个函数

请帮助我。

Answer 1

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 

}); 

Answer 2

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

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

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

还将重新启用selectboxes如果选择默认选项返回。

Answer 3

你得到的错误是因为该行的：

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

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

至于你要求禁用以下所有选择的元素，也许是：

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