jQuery - bir HTML açılır menüsünde belirli bir öğe aralığı olsun

Question

Bir javona açılan menüde jQuery ile bulmam gereken bir dizi öğe var. Bu sayede bunları gizleyebilirim [.css('display', 'none') kullanarak].

Bunlar <option>---- Articles</option> ve bu aralıkta ilk altı madde dışında <option>---- Jargon Buster</option>arasındaki tüm olanları (bu örnekte)! Bu ilk altı dışında

, bu aralık içinde numarası ve diğer seçenekler metni (aralıklı ön ------ dan) değişir.

Belki bir şekilde $("#edit-menu-parent option:contains('---- Articles')" ve $("#edit-menu-parent option:contains('---- Jargon Buster')" seçicilerini kullanabiliyorum, ama bunların aralarında öğeleri almak için nasıl kullanılabileceğinden emin değilim.

Herhangi bir fikrin var mı?

<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

ben hem .hide() ve .css("display", "none") aramaya çalıştım, ama bunların hiçbiri Safari (Mac) çalışmak gibiydi, ancak Firefox (Mac) beklendiği gibi çalıştı.
Önce jQuery seçici yanlış, ama ben sadece #edit-menu-parent option seçerseniz aynı hatta olur düşündük.

Ben başlangıç ​​ve bitiş elemanlarının endeksi bulan bir senaryo oluşturulmuş ve sonra slice() silinmesi için gerekli öğeleri -s. Ancak, aksi halde çalışmayan remove() kullandım. İlk altı elemanın orada kalması gerektiği söylendiği için, orada bu start+6 var.

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

Tanımladığınız :contains yaklaşımınız işe yaramalıdır. Neden olmadığını göremedim.

OPTION ler bir üst elemanın sıradan çocuklar başka bir şey değildir ve JQuery'nın filtreleme olanaklarından tüm kısıtlama olmadan başvurmalıdır.

Answer 3

kullanımı bu işlevler: benim test HTML dosyası olarak http://www.texotela.co.uk/code/jquery/select/

Answer 4

Açılan listeniz gruplandırmayı düşündünüz mü?

<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

Sonra yerine tüm grubu göstermek/gizleyebilirsiniz?