jQuery - получите определенный диапазон объектов в HTML выпадающее меню
У меня есть диапазон объектов в HTML выпадающее меню, которое я должен найти с jQuery, таким образом, я могу затем скрыть их [использование .css('display', 'none')].
Они - (в этом примере) все те между <option>---- Articles</option> и <option>---- Jargon Buster</option> за исключением первых шести объектов в этом диапазоне!
Кроме этих первых шести, будут варьироваться число и текст всех других опций в этом диапазоне (кроме от продвижения ------ ).
Я думаю, возможно, что я могу utilse селекторы $("#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>
4 ответа
В моём тестовом HTML-файле я пытался вызвать как .hide(), так и .css("display", "none"), но ни один из них, похоже, не работал в Safari(Mac), но работал, как ожидалось, в Firefox(Mac).
Сначала я подумал, что селектор jQuery неправильный, но то же самое произойдет, даже если я выберу просто #edit-menu-parent опцию .
Я создал скрипт, который находит индекс начальных и конечных элементов, а затем 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();
:содержит подход, который вы описываете, должен работать. Я не мог понять, почему нет.
OPTIONs являются ничем иным, как обычными дочерними элементами родительского элемента, и все возможности JQuery по фильтрации должны применяться без ограничений.
Вы считаете группировать ваш выпадающий список?
<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>
Затем вы можете скрыть / показать всю группу вместо этого?
Используйте эти функции: http://www.texotela.co.uk/code/jquery/select/