Seçme listesinden gizlemek / kaldırmak istediğim seçeneklerin anahtar / değer çiftlerine sahip bir nesnem var. Aşağıdaki seçenek seçicilerden hiçbiri çalışmaz. Neyi kaçırıyorum?
$.each(results['hide'], function(name, title) {
$("#edit-field-service-sub-cat-value option[value=title]").hide();
$("#edit-field-service-sub-cat-value option[@value=title]").hide();
}); Yanıtlar:
Değeri ne olursa olsun, ikinci form (ile @) jQuery 1.3'te yoktur. İlki işe yaramıyor çünkü görünüşe göre değişken enterpolasyonu bekliyorsunuz. Bunu dene:
$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();titleJQuery seçici meta karakterleri içeriyorsa , bunun muhtemelen çeşitli korkunç şekillerde bozulacağını unutmayın .
Bu x tarayıcıyı yapamazsınız. Hatırlarsam ie sorunları var. Yapılması en kolay şey, öğeleri kaldırmadan önce seçimin klonlanmış bir kopyasını saklamaktır; bu, eksik öğeleri kolayca kaldırmanıza ve ardından geri eklemenize olanak tanır.
Daha iyi bir yol buldum ve bu çok basit:
$("option_you_want_to_hide").wrap('<span/>')Tekrar göstermek için, sadece bu seçeneği bulun (span değil) ve $("option_you_want_to_show").unwrap().
Chrome ve Firefox'ta test edildi .
İşte benim spin, yerel DOM yöntemleri nedeniyle muhtemelen biraz daha hızlı
$.each(results['hide'], function(name, title) {
$(document.getElementById('edit-field-service-sub-cat-value').options).each(function(index, option) {
if( option.value == title ) {
option.hidden = true; // not fully compatible. option.style.display = 'none'; would be an alternative or $(option).hide();
}
});
});Bu Firefox 3.0'da çalışır, ancak MSIE 8'de veya Opera 9.62'de çalışmaz:
jQuery('#destinations').children('option[value="1"]').hide();
jQuery('#destinations').children('option[value="1"]').css('display','none');Ancak bir seçeneği gizlemek yerine, basitçe devre dışı bırakılabilir:
jQuery('#destinations').val('2');
jQuery('#destinations').children('option[value="1"]').attr('disabled','disabled');Yukarıdaki iki satırdan ilki Firefox içindir ve 2. seçeneğe odaklanın (değer = "2" olduğu varsayılarak). Atlarsak, seçenek devre dışı bırakılır, ancak biz onu düşürmeden önce hala "etkin" seçeneğini görüntüler. Bu nedenle, bundan kaçınmak için başka bir seçeneğe odaklanıyoruz.
Çapraz tarayıcı yapılabilir; sadece bazı özel programlama gerektirir. Lütfen http://jsfiddle.net/sablefoste/YVMzt/6/ adresinde kemanıma bakın . Chrome, Firefox, Internet Explorer ve Safari'de çalışması test edildi.
Kısacası, #optionstorediziyi sıralı olarak depolayan gizli bir alanım var (çünkü JavaScript'te İlişkilendirilebilir Diziler olamaz). Daha sonra kategoriyi değiştirdiğinizde, mevcut seçenekleri ayrıştırır (yalnızca ilk seferde) bunları yazar #optionstore, her şeyi siler ve yalnızca kategoriyle ilişkili olanları geri koyar.
NOT: Bunu kullanıcıya görüntülenen metinden farklı seçenek değerlerine izin vermek için oluşturdum, bu nedenle oldukça esnek.
HTML:
<p id="choosetype">
<div>
Food Category:
</div>
<select name="category" id="category" title="OPTIONAL - Choose a Category to Limit Food Types" size="1">
<option value="">All Food</option>
<option value="Food1">Fruit</option>
<option value="Food2">Veggies</option>
<option value="Food3">Meat</option>
<option value="Food4">Dairy</option>
<option value="Food5">Bread</option>
</select>
<div>
Food Selection
</div>
<select name="foodType" id="foodType" size="1">
<option value="Fruit1" class="sub-Food1">Apples</option>
<option value="Fruit2" class="sub-Food1">Pears</option>
<option value="Fruit3" class="sub-Food1">Bananas</option>
<option value="Fruit4" class="sub-Food1">Oranges</option>
<option value="Veg1" class="sub-Food2">Peas</option>
<option value="Veg2" class="sub-Food2">Carrots</option>
<option value="Veg3" class="sub-Food2">Broccoli</option>
<option value="Veg4" class="sub-Food2">Lettuce</option>
<option value="Meat1" class="sub-Food3">Steak</option>
<option value="Meat2" class="sub-Food3">Chicken</option>
<option value="Meat3" class="sub-Food3">Salmon</option>
<option value="Meat4" class="sub-Food3">Shrimp</option>
<option value="Meat5" class="sub-Food3">Tuna</option>
<option value="Meat6" class="sub-Food3">Pork</option>
<option value="Dairy1" class="sub-Food4">Milk</option>
<option value="Dairy2" class="sub-Food4">Cheese</option>
<option value="Dairy3" class="sub-Food4">Ice Cream</option>
<option value="Dairy4" class="sub-Food4">Yogurt</option>
<option value="Bread1" class="sub-Food5">White Bread</option>
<option value="Bread2" class="sub-Food5">Panini</option>
</select>
<span id="optionstore" style="display:none;"></span>
</p>JavaScript / jQuery:
$(document).ready(function() {
$('#category').on("change", function() {
var cattype = $(this).val();
optionswitch(cattype);
});
});
function optionswitch(myfilter) {
//Populate the optionstore if the first time through
if ($('#optionstore').text() == "") {
$('option[class^="sub-"]').each(function() {
var optvalue = $(this).val();
var optclass = $(this).prop('class');
var opttext = $(this).text();
optionlist = $('#optionstore').text() + "@%" + optvalue + "@%" + optclass + "@%" + opttext;
$('#optionstore').text(optionlist);
});
}
//Delete everything
$('option[class^="sub-"]').remove();
// Put the filtered stuff back
populateoption = rewriteoption(myfilter);
$('#foodType').html(populateoption);
}
function rewriteoption(myfilter) {
//Rewrite only the filtered stuff back into the option
var options = $('#optionstore').text().split('@%');
var resultgood = false;
var myfilterclass = "sub-" + myfilter;
var optionlisting = "";
myfilterclass = (myfilter != "")?myfilterclass:"all";
//First variable is always the value, second is always the class, third is always the text
for (var i = 3; i < options.length; i = i + 3) {
if (options[i - 1] == myfilterclass || myfilterclass == "all") {
optionlisting = optionlisting + '<option value="' + options[i - 2] + '" class="' + options[i - 1] + '">' + options[i] + '</option>';
resultgood = true;
}
}
if (resultgood) {
return optionlisting;
}
}resultgood, herhangi bir optionlistingeklenip eklenmediğini görmek için yapılan bir kontroldür . öyleyse, e-posta listesi <option>döndürülür. Değilse, hiçbir şey geri döndürülmez; yanlışlıkla gerçekte orada olmayan bir sınıfı dahil ederseniz isteyeceğiniz şey budur (bu örnekte, diyelim ki, alt Gıda6). Açılır menüde bir boşluk döndürmek için, işlevin başındaki bildirim satırını olarak değiştirin var optionlisting="<option value=''></option>";.
dataniteliği kullanırım; anlamsal olarak daha doğrudur.
En iyi bahsiniz, devre dışı bırakmak istediğiniz seçenek öğelerinde, ardından CSS kümesinde devre dışı = true olarak ayarlamaktır.
option:disabled {
display: none;
}Bu şekilde, tarayıcı devre dışı bırakılan öğeyi gizlemeyi desteklemese bile, yine de seçilemez .. ancak bunu destekleyen tarayıcılarda bunlar gizlenecektir.
Bu soruya ve cevaplarına bir göz atın -
Belirli seçenekleri devre dışı bırakın ...
Kodunuza baktığınızda, öznitelik değerini belirtmeniz gerekebilir
$("#edit-field-service-sub-cat-value option[value='title']").hide();Tırnak işaretleri çoğu durumda isteğe bağlıdır, ancak değer "]" gibi karakterler içerdiğinde çakışmaları önlemek için kullanılmalıdır.
DÜZENLE:
Başlığı işlev parametresinden aldığınızı fark ettim, bu durumda sözdizimi
$("#edit-field-service-sub-cat-value option[value='" + title + "']").hide();Sorun, Internet Explorer'ın belirli seçenekler için gizle ve göster yöntemlerini desteklememesidir. "AttType" özniteliğinin değeri olarak şu anda seçili tipe sahip olmayan ddlReasonCode seçimimin tüm seçeneklerini gizlemek istedim.
Güzel Chrome şunlardan oldukça memnun olsa da:
//Hiding all options
$("#ddlReasonCode").children().hide();
//Showing only the relevant options
$("#ddlReasonCode").children("option[atttype=\"" + CurrentType + "\"]").show();IE'nin gerektirdiği şey budur (çocuklar, bunu CHROME'da denemeyin :-)):
//Hiding all options
$("#ddlReasonCode option").each(function (index, val) {
if ($(this).is('option') && (!$(this).parent().is('span')) && ($(this).atttype != CurrentType))
$(this).wrap('<span>').hide();
});
//Showing only the relevant options
$("#ddlReasonCode option").each(function (index, val) {
if (this.nodeName.toUpperCase() === 'OPTION') {
var span = $(this).parent();
var opt = this;
if ($(this).parent().is('span') && ((this).atttype == CurrentType)) {
$(opt).show();
$(span).replaceWith(opt);
}
}
});Bu sarma fikrini http://ajax911.com/hide-options-selecbox-jquery/ adresinde buldum.
Test ettikten sonra, kaos da dahil olmak üzere, öğeleri gizlemek için yukarıda yayınlanan çözümler artık Firefox'un (66.0.4), Chrome'un (74.0.3729.169) ve Edge'in (42.17134.1.0) en son sürümlerinde çalışıyor.
$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();
$("#edit-field-service-sub-cat-value option[value=" + title + "]").show();IE için bu işe yaramaz, ancak seçeneği devre dışı bırakabilirsiniz
$("#edit-field-service-sub-cat-value option[value=" + title + "]").attr("disabled", "disabled");
$("#edit-field-service-sub-cat-value option[value=" + title + "]").removeAttr("disabled");ve sonra farklı bir değerin seçimini zorlayın.
$("#edit-field-service-sub-cat-value").val("0");Devre dışı bırakılmış bir seçenek için, açılır menünün değeri artık devre dışı bırakılmışsa seçilen seçeneğin değeri değil, boş olacaktır.
Görünüşe göre "seçili" özniteliği de güncellemeniz gerekiyor. Aksi takdirde, şu anda seçili olan seçenek görüntülenmeye devam edebilir - aslında bir seçeneği seçmeye gittiğinizde muhtemelen kaybolacaktır (benim için yaptığı şey buydu): Bunu yapmayı deneyin:
$('#mySelector').children('option').hide();
$('#mySelector').children('option').removeAttr("selected"); //this may be overkill.
$('#mySelector').children('option[value="'+SelVal+'"]').show();
$('#mySelector').children(':visible').attr('selected','selected'); //assuming that something is still on the list.Başka bir seçim listesinden seçilen seçeneğe bağlı olarak bir seçim listesindeki seçenekleri gizlemeye çalışıyordum. Firefox3'te çalışıyordu ama Internet Explorer 6'da çalışmıyor. Burada bazı fikirlerim var ve şimdi bir çözümüm var, bu yüzden paylaşmak istiyorum:
function change_fruit(seldd) {
var look_for_id=''; var opt_id='';
$('#obj_id').html("");
$("#obj_id").append("<option value='0'>-Select Fruit-</option>");
if(seldd.value=='0') {
look_for_id='N';
}
if(seldd.value=='1'){
look_for_id='Y';
opt_id='a';
}
if(seldd.value=='2') {
look_for_id='Y';
opt_id='b';
}
if(seldd.value=='3') {
look_for_id='Y';
opt_id='c';
}
if(look_for_id=='Y') {
$("#obj_id_all option[id='"+opt_id+"']").each(function() {
$("#obj_id").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
});
}
else {
$("#obj_id_all option").each(function() {
$("#obj_id").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
});
}
}<select name="obj_id" id="obj_id">
<option value="0">-Select Fruit-</option>
<option value="1" id="a">apple1</option>
<option value="2" id="a">apple2</option>
<option value="3" id="a">apple3</option>
<option value="4" id="b">banana1</option>
<option value="5" id="b">banana2</option>
<option value="6" id="b">banana3</option>
<option value="7" id="c">Clove1</option>
<option value="8" id="c">Clove2</option>
<option value="9" id="c">Clove3</option>
</select>
<select name="fruit_type" id="srv_type" onchange="change_fruit(this)">
<option value="0">All</option>
<option value="1">Starts with A</option>
<option value="2">Starts with B</option>
<option value="3">Starts with C</option>
</select>
<select name="obj_id_all" id="obj_id_all" style="display:none;">
<option value="1" id="a">apple1</option>
<option value="2" id="a">apple2</option>
<option value="3" id="a">apple3</option>
<option value="4" id="b">banana1</option>
<option value="5" id="b">banana2</option>
<option value="6" id="b">banana3</option>
<option value="7" id="c">Clove1</option>
<option value="8" id="c">Clove2</option>
<option value="9" id="c">Clove3</option>
</select>Firefox 3 ve Internet Explorer 6'da çalıştığı kontrol edildi.
Dize birleştirmeden kaçınmak için jQuery.grep kullanabilirsiniz
$($.grep($("#edit-field-service-sub-cat-value option"),
function(n,i){
return n.value==title;
})
).hide()Muhtemelen jquery eklentisi kadar zarif veya yeniden kullanılamaz. ancak başka bir yaklaşım, basitçe seçenek öğelerini kaydetmek ve bunları gerektiği gibi değiştirmektir:
var SelectFilter = function ()
{
this.allOptions = $("#someSelect option");
this.fooBarOptions= $("#someSelect option[value='foo']");
this.fooBarOptions= this.fooBarOptions.add($("#someSelect option[value='bar']"));
this.showFooBarOptions = function()
{
$("#someSelect option").remove();
$("#someSelect").append(this.fooBarOptions);
};
this.showAllOptions = function()
{
$("#someSelect option").remove();
$("#someSelect").append(this.allOptions);
};
};nesneyi kullanmak için bunu yapın:
var filterObject = new SelectFilter();
filterObject.showFooBarOptions (); <select>Özel veri özniteliklerine dayalı bir combobox ( ) filtreleyen bir işlev kullanarak bir çözüm uyguladım . Bu çözüm şunları destekler:
<option>filtre seçeneğini boş ne zaman ayrılacağını göstermek için.<option> data-filter özniteliği olmayan elemanlar dokunulmadan bırakılır.JQuery 2.1.4 ve Firefox, Chrome, Safari ve IE 10+ ile test edilmiştir.
Bu örnek HTML'dir:
<select id="myCombobox">
<option data-filter="1" value="AAA">Option 1</option>
<option data-filter="1" value="BBB">Option 2</option>
<option data-filter="2" value="CCC">Option 3</option>
<option data-filter="2" value="DDD">Option 4</option>
<option data-filter="3" value="EEE">Option 5</option>
<option data-filter="3" value="FFF">Option 6</option>
<option data-filter-emptyvalue disabled>No Options</option>
</select>Filtreleme için jQuery kodu:
function filterCombobox(selectObject, filterValue, autoSelect) {
var fullData = selectObject.data("filterdata-values");
var emptyValue = selectObject.data("filterdata-emptyvalue");
// Initialize if first time.
if (!fullData) {
fullData = selectObject.find("option[data-filter]").detach();
selectObject.data("filterdata-values", fullData);
emptyValue = selectObject.find("option[data-filter-emptyvalue]").detach();
selectObject.data("filterdata-emptyvalue", emptyValue);
selectObject.addClass("filtered");
}
else {
// Remove elements from DOM
selectObject.find("option[data-filter]").remove();
selectObject.find("option[data-filter-emptyvalue]").remove();
}
// Get filtered elements.
var toEnable = fullData.filter("option[data-filter][data-filter='" + filterValue + "']");
// Attach elements to DOM
selectObject.append(toEnable);
// If toEnable is empty, show empty option.
if (toEnable.length == 0) {
selectObject.append(emptyValue);
}
// Select First Occurrence
if (autoSelect) {
var obj = selectObject.find("option[selected]");
selectObject.val(obj.length == 0 ? toEnable.val() : obj.val());
}
}Kullanmak için, korumak istediğiniz değerle işlevi çağırmanız yeterlidir.
filterCombobox($("#myCombobox"), 2, true);Ardından ortaya çıkan seçim şu şekilde olacaktır:
<select id="myCombobox">
<option data-filter="2" value="CCC">Option 3</option>
<option data-filter="2" value="DDD">Option 4</option>
</select>Orijinal öğeler data () işlevi tarafından saklanır, bu nedenle sonraki çağrılar doğru öğeleri ekler ve kaldırır.
Cevap, @daha yeni jQuery yinelemeleri için geçersiz olduğuna işaret ediyor . Bu doğru olsa da, bazı eski IE'ler hala seçenek öğelerini gizlemiyor. Etkilenen bu sürümlerde seçenek öğelerini gizlemekle uğraşmak zorunda kalan herkes için burada bir geçici çözüm yayınladım:
http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/
Temel olarak sadece bir aralıkla sarın ve şovda değiştirin.
Bu soruyla karşılaşan herhangi biri, seçimlerin yeteneklerini büyük ölçüde artıran Seçilmiş'in kullanımını da düşünebilir .
Bu sorunun yanıtlandığını biliyorum. Ama benim ihtiyacım biraz farklıydı. Değer yerine metne göre filtrelemek istedim. Bu yüzden cevabı @ William Herry tarafından bu şekilde değiştirdim.
var array = ['Administration', 'Finance', 'HR', 'IT', 'Marketing', 'Materials', 'Reception', 'Support'];
if (somecondition) {
$(array).each(function () {
$("div#deprtmnts option:contains(" + this + ")").unwrap();
});
}
else{
$(array).each(function () {
$("div#deprtmnts option:contains(" + this + ")").wrap('<span/>');
});
}Bu şekilde, bunun gibi içeriği değiştirerek de değeri kullanabilirsiniz.
$("div#ovrcateg option[value=" + this + "]").wrap('<span/>');Sakla için seçenek de seçme kullanım:
option_node.hidden = true; # For hide selcet item
option_node.hidden = false; # For show selcet itemNerede option_node olduğunu HTMLOptionElement
Not: JQuery kullanmıyorum, ancak işe yarayacağını tahmin ediyorum:
$('.my_select option[value="my_cool_value"]').hidden = trueDeğer veya Sınıf adı ile gösterebilir / gizleyebilirsiniz . Aşağıdaki bağlantıyı çalışma örneğiyle kontrol edin.
Jquery'nin seçilen seçeneklerini değerle veya sınıf adıyla gösterin / gizleyin.
$ ("# ddtypeoftraining seçeneği [değer = 5]"). css ("görüntüleme", "yok"); $ ('# ddtypeoftraining']. selectpicker ('yenileme');