表t tr tr html標籤選擇（嘗試父/鏈接下拉選項內的兩個下拉選項卡）

Question

我有這兩個下拉選項卡/選項，我希望有人可以幫助我解決我的小問題。我試圖在類別中選擇一個選項，然後只能選擇與子類別內部相關的選項，而不能選擇所有內容。試圖家長的相互關係進行基本的顯示選項..

<tr> 
    <td align="right">Category</td> 
    <td><label> 
     <select name="category" id="category"> 
     <option value="" selected="selected"></option> 
     <option value="Clothing">Clothing</option> 
     <option value="Headwear">Headwear</option> 
     </select> 
    </label></td> 
</tr> 

<tr> 
    <td align="right">Subcategory</td> 
    <td> 
     <select name="subcategory" id="subcategory"> 
     <option value="" selected="selected"></option> 
     <option value="beanie">beanie</option> 
     <option value="Cap">cap</option> 
     <option value="Shirts">Shirt</option> 
     </select> 
    </td> 
</tr> 

Answer 1

如果您正在使用jQuery試試這個，jsFiddle Example

$('#category').change(function(event){ 
    var subcategory = $(this).closest('tr').next().find('#subcategory'); 
    var selectedCat = $(this).val(); 
    if(selectedCat != false) { 
     $(subcategory).prop('disabled', false).val(0);; 
     $(subcategory).find("[data-target='" + selectedCat + "']").show() 
     $(subcategory).find("[data-target!='" + selectedCat + "']").hide() 
    } else { 
     $(subcategory).prop('disabled', true).val(0); 
    } 
}); 

此外，禁用的子類別，並添加data-target="category-name"

<select name="subcategory" id="subcategory" disabled="true"> 
    <option value="" selected="selected"></option> 
    <option value="beanie" data-target="headwear">beanie</option> 
    <option value="cap" data-target="headwear">cap</option> 
    <option value="shirts" data-target="clothing">Shirt</option> 
</select>