選擇下選擇

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); 
});