jQuery 过滤器选择选项

Question

是否可以过滤特定的选择选项？

我有一个代码:

<select id="adcategory" name="adcategory">
    <option value="">Select</option>
    <option value="25" class="dropdownparentcategory">Florida Atlantic University</option>

    <option value="26">- Books </option>
    <option value="27">- Electronics</option>
    <option value="28">- For Rent</option>

    <option value="17" class="dropdownparentcategory">Florida International University</option>

    <option value="18">- Books</option>
    <option value="19">- Electronics</option>
    <option value="20">- For Rent</option>

    <option value="1" class="dropdownparentcategory">Florida Tech</option>
    <option value="2">- Books</option>
    <option value="3">- Electronics</option>
    <option value="7">- For Rent</option>


</select>

因此，如果变量例如 $school = Florida Atlantic University 只显示下一个学校类别 ( .dropdownparentcategory ) 之前的选项，那么在这种情况下，它们只会是:

<select id="adcategory" name="adcategory">
    <option value="">Select</option>

    <option value="26">- Books </option>
    <option value="27">- Electronics</option>
    <option value="28">- For Rent</option>

</select>

正如您在此图中看到的:

可以用 jQuery 创建吗？

Answer 1

这看起来可能是糟糕的设计。我建议转到 <optgroup> ^[MDN]用于对下拉项进行分组的标签:

<select>
    <optgroup label="Florida Atlantic University">
        <option value="1">Text</option>
        <option value="2">Text</option>
        <option value="3">Text</option>
    </optgroup>
    <optgroup label="Florida Tech">
        <option value="4">Text</option>
        <option value="5">Text</option>
        <option value="6">Text</option>
    </optgroup>
</select>

然后选择子元素就变得非常容易；

$('optgroup[label*="' + yourSchoolName + '"]').find('option')