jQuery: obtenga un cierto rango de elementos dentro de un menú desplegable HTML

Question

Tengo un rango de elementos en un menú desplegable HTML que necesito encontrar con jQuery para poder ocultarlos [usando .css('display', 'none')].

Ellos son (en este ejemplo) todos los entre <option>---- Articles</option> y <option>---- Jargon Buster</option>excepto durante los primeros seis artículos en esta gama!

Aparte de estos primeros seis, el número y el texto de todas las otras opciones dentro de este rango variarán (aparte del ------ principal).

Estoy pensando que tal vez pueda utilizar los selectores $("#edit-menu-parent option:contains('---- Articles')" y $("#edit-menu-parent option:contains('---- Jargon Buster')" de alguna manera, pero no estoy seguro de cómo se pueden utilizar para obtener los elementos entre ellos.

¿Alguna idea?

<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

En mi archivo HTML de prueba he intentado llamar tanto .hide() y .css("display", "none"), pero ninguno de ellos parecía funcionar en Safari (Mac), pero funcionaba como se esperaba en Firefox (Mac).
Primero pensé que el selector jQuery está mal, pero lo mismo sucede incluso si selecciono simplemente #edit-menu-parent option.

Creé un script que encuentra el índice de elementos de inicio y final y luego slice() -s fuera de los elementos necesarios para su eliminación. Sin embargo, utilicé remove() que no funcionó de otra manera. Como se dijo que los primeros seis elementos deben permanecer allí, tengo este start+6 allí.

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

El enfoque :contains que describe debería funcionar. No pude ver por qué no.

OPTION s no son más que elementos secundarios comunes de un elemento primario, y todas las posibilidades de filtrado de JQuery deben aplicarse sin restricciones.

Answer 3

uso de estas funciones: http://www.texotela.co.uk/code/jquery/select/

Answer 4

¿Ha considerado agrupar su lista desplegable?

<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

A continuación, puede ocultar/mostrar todo el grupo en su lugar?