jQuery - 在HTML下拉菜單中獲取一定範圍內的項目

Question

我需要使用jQuery在HTML下拉菜單中找到一系列項目，然後我可以使用[.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

在我的測試的HTML文件我都嘗試調用.hide()和.css("display", "none")，但他們都不似乎在Safari（蘋果機）的工作，但預期在Firefox（蘋果機）工作。
首先，我認爲jQuery選擇器是錯誤的，但即使我僅選擇#edit-menu-parent option也會發生相同的情況。

我創建了一個腳本，用於查找開始和結束元素的索引，然後slice() -s刪除所需的項目。但是，我用remove()，否則沒有工作。既然有人說前六個元素必須留在那裏，我在這裏有這個start+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(); 

Answer 2

您所描述的:contains方法應該可行。我看不出爲什麼。

OPTION s不過是父元素的普通子元素，所有JQuery的過濾可能性都應該沒有限制。

Answer 3

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

Answer 4

您是否考慮將您的下拉列表分組？

<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

然後你可以隱藏/顯示全組呢？