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>

表td tr html标签选择（尝试在两个下拉选项卡中的父/链接下拉选项）

1 个答案: