jQuery -在HTML下拉菜单中获取特定范围的项目

Question

我在HTML下拉菜单中有一系列的项目，我需要在jQuery中找到，这样我就可以使用.css('display', 'none')来隐藏它们。

它们是(在本例中) <option>---- Articles</option>和<option>---- Jargon Buster</option> 之间的所有条目，除了这个范围内的前六项之外，！

除前六项外，此范围内所有其他选项的数量和文本将有所不同(除了领先的------ )。

我在想，也许我可以以某种方式使用选择器$("#edit-menu-parent option:contains('---- Articles')"和$("#edit-menu-parent option:contains('---- Jargon Buster')"，但我不知道如何使用它们之间的项目。

有什么想法吗？

<select id="edit-menu-parent" class="form-select menu-title-select" name="menu[parent]">
<option>---- Clients</option>
<option>---- Testimonials</option>
<option>-- Resources</option>
<option>---- Articles</option>
<option>------ Accessibilty Articles</option>
<option>------ Usability Articles</option>
<option>------ Charities Articles</option>
<option>------ Public Sector Articles</option>
<option>------ Web Development Articles</option>
<option>------ Social Media Articles</option>
<option>------ Are Your Online Forms</option>
<option>------ Benefits of Web Standards</option>
<option>------ Benefits of web accessibility</option>
<option>------ Increase Donations to Your</option>
<option>------ Need More Web Traffic? Get</option>
<option>------ The Secret to Successful ALT</option>
<option>------ Top 10 Email Marketing Tips</option>
<option>------ What PAS 78 Means for Your</option>
<option>------ What is Web Accessibility?</option>
<option>---- Jargon Buster</option>
<option>---- Web Design Tips</option>
<option>------ Colour blindness</option>
<option>------ Create a custom 404 page</option>
<option>------ Download time and usability</option>
<option>------ Full stop to the end of alt</option>
<option>------ Javascript and navigation</option>
<option>---- Your Industry News</option>
</select>

Answer 1

您所描述的*包含方法应该有效。我看不出为什么不行。

OPTION只是父元素的普通子元素，所有的JQuery过滤可能性都应该不受限制地应用。

Answer 2

您考虑过将下拉列表分组吗？

    <select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

W3学校视群

然后你可以隐藏/显示整个小组而不是？

Answer 3

使用以下功能：http://www.texotela.co.uk/code/jquery/select/