jQuery过滤器选择选项

时间:2011-08-15 17:29:44

标签: jquery select options

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

我有一个代码:

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

如下图所示:

enter image description here

是否可以使用jQuery创建?

4 个答案:

答案 0 :(得分:8)

这看起来像是糟糕的设计。我建议您转到<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')

答案 1 :(得分:2)

当然可以。

$("#adcategory option:contains('Florida International University')").nextUntil(".dropdownparentcategory")

http://jsfiddle.net/Xeon06/YEeMH/

答案 2 :(得分:2)

我想说,通过分类

为所有元素添加类
<option class="js_atl" value="25" />
<option class="js_atl" value="26" />
<option class="js_atl" value="27" />
<option class="js_int" value="28" />
<option class="js_int" value="29" />

所以你可以使用ur $ school =“佛罗里达大西洋大学” 使用$(".js_atl")显示或附加或$(".js_int")用于返回该类别中所选元素数组的其他类别{{1}}。

希望这会有所帮助。

答案 3 :(得分:0)

你应该能够应用“display:none;”的样式。到您不希望看到的标签。