jQuery - eine bestimmte Auswahl von Elementen innerhalb eines HTML-Dropdown-Menüs erhalten

Question

Ich habe eine Reihe von Elementen in einem HTML-Dropdown-Menü, die ich mit jQuery finden muss, damit ich sie dann ausblenden kann [mit .css('display', 'none')].

Sie sind (in diesem Beispiel) alle diejenigen zwischen <option>---- Articles</option> und <option>---- Jargon Buster</option>mit Ausnahme der ersten sechs Artikel in diesem Bereich!

Andere als diese ersten sechs, die Anzahl und der Text aller anderen Optionen in diesem Bereich variieren (abgesehen von der führenden ------).

Ich denke, vielleicht kann ich die Selektoren $("#edit-menu-parent option:contains('---- Articles')" und $("#edit-menu-parent option:contains('---- Jargon Buster')" irgendwie nutzen, aber ich bin mir nicht sicher, wie diese verwendet werden können, um die Elemente zwischen ihnen zu bekommen.

Irgendwelche Ideen?

<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

In meinem Test HTML-Datei habe ich versucht, beide Aufruf .hide() und .css("display", "none"), aber keiner von ihnen schien in Safari (Mac) zu arbeiten, aber arbeitete in Firefox (Mac) wie erwartet.
Zuerst dachte ich, dass der jQuery-Selektor falsch ist, aber das gleiche passiert auch wenn ich einfach #edit-menu-parent option auswähle.

Ich erstellte ein Skript, das den Index der Start- und Endelemente findet und dann slice() -s die erforderlichen Elemente zum Löschen. Allerdings habe ich remove() verwendet, die sonst nicht funktionierte. Da gesagt wurde, dass die ersten sechs Elemente dort bleiben müssen, habe ich diese start+6 da.

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

Die von Ihnen beschriebene Methode :contains sollte funktionieren. Ich konnte nicht sehen, warum nicht.

OPTION s sind nichts als gewöhnliche Kinder eines Elternelements, und alle Filtermöglichkeiten von JQuery sollten uneingeschränkt gelten.

Answer 3

Verwendung dieser Funktionen: http://www.texotela.co.uk/code/jquery/select/

Answer 4

Haben Sie darüber nachgedacht, Ihre Dropdownliste zu gruppieren?

<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

Dann können Sie verstecken/zeigen die ganze Gruppe statt?