jQuery - get a certain range of items within an HTML drop-down menu.

Question

Hi,

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

They are (in this example) all the ones between <option>---- Articles</option> and <option>---- Jargon Buster</option> except for the first six items in this range!

Other than these first six, the number and text of all the other options within this range will vary (apart from from the leading ------ ).

I'm thinking maybe I can utilse the selectors $("#edit-menu-parent option:contains('---- Articles')" and $("#edit-menu-parent option:contains('---- Jargon Buster')" somehow, but I'm not sure how these can be used to get the items in 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>

Answer 1

The :contains approach you describe should work. I couldn't see why not.

OPTIONs are nothing but ordinary children of a parent element, and all of JQuery's filtering possibilities should apply without restriction.

Answer 2

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

Answer 3

In my test HTML file I tried both calling .hide() and .css("display", "none"), but none of them seemed to work in Safari(Mac), but worked as expected in Firefox(Mac).
First I thought that the jQuery selector is wrong, but the same happens even if I select simply #edit-menu-parent option.

I created a script that finds the index of start and end elements and then slice()-s out the required items for deletion. However, I used remove() which didn't work otherwise. Since it was said that the first six elements must remain there, I have this start+6 there.

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 4

Have you considered grouping your dropdownlist?

    <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 you can hide/show the whole group instead?