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