jQuery——在HTML下拉菜单中获取一定范围的条目

I have a range of items in an HTML drop-down menu that I need to find with jQuery so I can then hide them [using .css('display', 'none')].

我需要在HTML下拉菜单中找到一些条目，以便使用jQuery隐藏它们(使用.css('display'， 'none'))。

They are (in this example) all the ones between <option>---- Articles</option> and <option>---- Jargon Buster</option> except for the first six items in this range!

它们(在本例中)都是 <选项> —文章和 <选项> —行话，除了前六个项目!

Other than these first six, the number and text of all the other options within this range will vary (apart from from the leading ------ ).

除了前六个选项之外，这个范围内所有其他选项的数量和文本都将有所不同(除了前导———)。

I'm thinking maybe I can utilse the selectors $("#edit-menu-parent option:contains('---- Articles')" and $("#edit-menu-parent option:contains('---- Jargon Buster')" somehow, but I'm not sure how these can be used to get the items in between them.

我在想，也许我可以使用选择器$(“#edit-menu-parent选项:contains('-- Articles')”和$(“#edit-menu-parent选项:contains('---行话Buster')”)，但我不确定如何使用它们来在它们之间获取条目。

Any ideas?

什么好主意吗?

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

4 个解决方案

#1

In my test HTML file I tried both calling .hide() and .css("display", "none"), but none of them seemed to work in Safari(Mac), but worked as expected in Firefox(Mac).
First I thought that the jQuery selector is wrong, but the same happens even if I select simply #edit-menu-parent option.

在我的测试HTML文件中，我尝试了两个调用.hide()和.css(“display”，“none”)，但是它们都没有在Safari(Mac)中工作，而是在Firefox(Mac)中工作。首先，我认为jQuery选择器是错误的，但是即使我简单地选择#edit-menu-parent选项，也会发生同样的情况。

I created a script that finds the index of start and end elements and then slice()-s out the required items for deletion. However, I used remove() which didn't work otherwise. Since it was said that the first six elements must remain there, I have this start+6 there.

我创建了一个脚本，该脚本查找开始和结束元素的索引，然后将()-s切片，以删除所需的项。但是，我使用了remove()，否则它将不起作用。因为据说前六个元素必须保持在那里，所以我有这个开始+6。

var options =  $("#edit-menu-parent option");
var start = options.index( $("option:contains(---- Articles)" ));
var end = options.index( $("option:contains(---- Jargon Buster)" ));
options.slice(start+6,end).remove();

#2

The :contains approach you describe should work. I couldn't see why not.

包含你描述的方法应该有效。我不知道为什么。

OPTIONs are nothing but ordinary children of a parent element, and all of JQuery's filtering possibilities should apply without restriction.

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

#3

Have you considered grouping your dropdownlist?

你考虑过把你的下拉列表分组吗?

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

W3学校optgroup

Then you can hide/show the whole group instead?

然后你就可以隐藏/显示整个团队了?

#4

use these functions: http://www.texotela.co.uk/code/jquery/select/

使用这些函数:http://www.texotela.co.uk/code/jquery/select/

#1

var options =  $("#edit-menu-parent option");
var start = options.index( $("option:contains(---- Articles)" ));
var end = options.index( $("option:contains(---- Jargon Buster)" ));
options.slice(start+6,end).remove();

#2