Geek Answers Handbook

JQuery - get a specific range of elements from the HTML drop-down menu

I have a number of HTML drop-down items that I need to find using jQuery, so I can hide them [using .css('display', 'none')].

They (in this example) are all between <option>---- Articles</option>and <option>---- Jargon Buster</option> , with the exception of the first six elements in this range !

In addition to these first six, the number and text of all other parameters in this range will differ (except for the lead ------).

I think I can use the selector $("#edit-menu-parent option:contains('---- Articles')", and $("#edit-menu-parent option:contains('---- Jargon Buster')"in some way, but I'm not sure how they can be used to get items between them.

Any ideas?

<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>
+5
4

HTML .hide() .css("display", "none"), Safari (Mac), Firefox (Mac).
, jQuery , , #edit-menu-parent option.

script, , 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();
+3

: , , . , .

OPTION - , , JQuery .

+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 Schools optgroup

Then can you hide / show the whole group?

+2
source

use the following functions: http://www.texotela.co.uk/code/jquery/select/

+1
source

More articles:


All Articles