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

В своем тестовом HTML-файле я пытался вызвать оба вызова .hide() и .css("display", "none"), но ни один из них не работал в Safari (Mac), но работал в Firefox (Mac), как ожидалось.
Сначала я подумал, что селектор jQuery неправильный, но то же самое происходит, даже если я просто выбрал #edit-menu-parent option.

Я создал скрипт, который находит индекс начальных и конечных элементов, а затем slice() выводит необходимые элементы для удаления. Однако я использовал 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

Рассматривали ли вы группирование вашего выпадающего списка?

    <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 Школа Optgroup

Тогда вы можете вместо этого скрыть / показать всю группу?

Answer 3

Подход : содержит , который вы описываете, должен работать. Я не мог понять, почему нет.

OPTION - это не что иное, как обычные дочерние элементы родительского элемента, и все возможности фильтрации JQuery должны применяться без ограничений.

Answer 4

используйте эти функции: http://www.texotela.co.uk/code/jquery/select/