Nascondi le opzioni in un elenco di selezione usando jQuery

Ho un object con coppie chiave / valore di opzioni che voglio hide / rimuovere da una lista di selezione. Nessuno dei seguenti selettori di opzioni funziona. Cosa mi manca?

$.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(); }); 

Per quello che vale, il secondo modulo (con la @ ) non esiste in jQuery 1.3. Il primo non funziona perché apparentemente ci si aspetta un’interpolazione variabile. Prova questo:

 $("#edit-field-service-sub-cat-value option[value=" + title + "]").hide(); 

Si noti che questo probabilmente si interrompe in vari modi orribili se il title contiene metacaratteri selettore jQuery.

Non puoi fare questo x-browser. Se ricordo, cioè ha problemi. La cosa più semplice da fare è conservare una copia clonata della selezione prima di rimuovere gli elementi, questo ti permette di rimuovere facilmente e quindi aggiungere gli elementi mancanti.

Ho trovato un modo migliore, ed è molto semplice:

 $("option_you_want_to_hide").wrap('') 

Per mostrare di nuovo, trova l’opzione (non span) e $("option_you_want_to_show").unwrap() .

È stato testato su Chrome e Firefox.

Ecco il mio giro, probabilmente un po ‘più veloce a causa dei metodi DOM nativi

 $.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(); } }); }); 

Può essere fatto cross browser; ci vuole solo un po ‘di programmazione personalizzata. Per favore guarda il mio violino su http://jsfiddle.net/sablefoste/YVMzt/6/ . È stato testato per funzionare su Chrome, Firefox, Internet Explorer e Safari.

In breve, ho un campo nascosto, #optionstore , che memorizza l’array in sequenza (dato che non è ansible associare array associativi in ​​JavaScript). Quindi, quando cambi la categoria, analizza le opzioni esistenti (la prima volta solo) le scrive su #optionstore , cancella tutto e rimette solo quelle associate alla categoria.

NOTA: l’ho creato per consentire diversi valori di opzione dal testo visualizzato all’utente, quindi è altamente flessibile.

L’HTML:

 

Food Category:
Food Selection

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 + ''; resultgood = true; } } if (resultgood) { return optionlisting; } } 

Funziona in Firefox 3.0, ma non in MSIE 8, né in Opera 9.62:

 jQuery('#destinations').children('option[value="1"]').hide(); jQuery('#destinations').children('option[value="1"]').css('display','none'); 

Ma piuttosto nascondendo un’opzione, si può semplicemente disabilitarla:

 jQuery('#destinations').val('2'); jQuery('#destinations').children('option[value="1"]').attr('disabled','disabled'); 

La prima delle due righe sopra è per Firefox e passa il focus alla seconda opzione (supponendo che abbia valore = “2”). Se lo omettiamo, l’opzione è disabilitata, ma continua a visualizzare l’opzione “abilitata” prima di rilasciarla. Quindi, passiamo l’attenzione su un’altra opzione per evitare questo.

Dai un’occhiata a questa domanda e alle risposte –

Disabilita le opzioni di selezione …

Guardando il tuo codice, potresti dover citare il valore dell’attributo

 $("#edit-field-service-sub-cat-value option[value='title']").hide(); 

dai selettori di attributo jQuery

Le virgolette sono facoltative nella maggior parte dei casi, ma dovrebbero essere utilizzate per evitare conflitti quando il valore contiene caratteri come “]”

MODIFICARE:

Ci siamo solo resi conto che stai ottenendo il titolo dal parametro function, nel qual caso la syntax dovrebbe essere

 $("#edit-field-service-sub-cat-value option[value='" + title + "']").hide(); 

In riferimento al suggerimento di redsquare, ho finito per fare questo:

 var selectItems = $("#edit-field-service-sub-cat-value option[value=" + title + "]").detach(); 

e poi per invertire questo:

 $("#edit-field-service-sub-cat-value").append(selectItems); 

La soluzione migliore è impostare disabled = true sugli elementi opzione che si desidera disabilitare, quindi nel set CSS

 option:disabled { display: none; } 

In questo modo, anche se il browser non supporta la possibilità di hide l’elemento disabilitato, non è ancora ansible selezionarlo .. ma sui browser che lo supportano, saranno nascosti.

Il problema è che Internet Explorer non sembra supportare i metodi hide e show per le opzioni selezionate. Volevo hide tutte le opzioni della mia selezione ddlReasonCode che non aveva il tipo attualmente selezionato come valore dell’attributo “attType”.

Mentre la bella Chrome era abbastanza soddisfatta di:

 //Hiding all options $("#ddlReasonCode").children().hide(); //Showing only the relevant options $("#ddlReasonCode").children("option[atttype=\"" + CurrentType + "\"]").show(); 

Questo è ciò che IE richiede (ragazzi, non provatelo a CHROME :-)):

 //Hiding all options $("#ddlReasonCode option").each(function (index, val) { if ($(this).is('option') && (!$(this).parent().is('span')) && ($(this).atttype != CurrentType)) $(this).wrap('').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); } } }); 

Ho trovato questa idea di wrapping su http://ajax911.com/hide-options-selecbox-jquery/

Sembra che devi anche aggiornare l’attributo “selezionato”. Altrimenti l’opzione attualmente selezionata potrebbe continuare a essere visualizzata, anche se probabilmente andrà via quando in realtà andrai a selezionare un’opzione (questo è ciò che ha fatto per me): Prova a fare questo:

 $('#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. 

Stavo cercando di hide le opzioni da un elenco selezionato in base all’opzione selezionata da un altro elenco di selezione. Funzionava in Firefox 3, ma non in Internet Explorer 6. Ho alcune idee qui e ho una soluzione ora, quindi mi piacerebbe condividere:

Il codice JavaScript

 function change_fruit(seldd) { var look_for_id=''; var opt_id=''; $('#obj_id').html(""); $("#obj_id").append(""); 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(""); }); } else { $("#obj_id_all option").each(function() { $("#obj_id").append(""); }); } } 

L’HTML

    

È stato controllato come funzionante in Firefox 3 e Internet Explorer 6.

Per evitare la concatenazione delle stringhe, puoi usare jQuery.grep

 $($.grep($("#edit-field-service-sub-cat-value option"), function(n,i){ return n.value==title; }) ).hide() 

Probabilmente non elegante o riutilizzabile come un plugin jQuery. ma un altro approccio è semplicemente salvare gli elementi dell’opzione e scambiarli come richiesto:

 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); }; }; 

fai questo per usare l’object:

 var filterObject = new SelectFilter(); filterObject.showFooBarOptions (); 

Ho implementato una soluzione utilizzando una funzione che filtra una casella combinata ( ) in base agli attributi dei dati personalizzati. Questa soluzione supporta:

  • Avere una per mostrare quando il filtro lascerebbe la selezione vuota.
  • Rispetta gli attributi selezionati esistenti.
  • elementi senza l’attributo filtro dati rimangono inalterati.

Testato con jQuery 2.1.4 e Firefox, Chrome, Safari e IE 10+.

Questo è l’esempio HTML:

  

Il codice jQuery per il filtraggio:

 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()); } } 

Per usarlo, basta chiamare la funzione con il valore che si desidera mantenere.

 filterCombobox($("#myCombobox"), 2, true); 

Quindi la selezione risultante sarà:

  

Gli elementi originali sono memorizzati dalla funzione data (), quindi le chiamate successive aggiungeranno e rimuoveranno gli elementi corretti.

La risposta sottolinea che @ non è valido per le nuove iterazioni di jQuery. Mentre quello è corretto, alcuni IE più vecchi ancora non nascondono gli elementi di opzione. Per chiunque abbia a che fare con l’occultamento di elementi di opzioni in quelle versioni interessate, ho postato una soluzione qui:

http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/

Fondamentalmente basta avvolgerlo con uno span e rimetterlo in mostra.

Chiunque inciampi in questa domanda potrebbe anche considerare l’uso di Chosen , che amplia notevolmente le capacità di selezione.

 $("option_you_want_to_hide").addClass('hidden') 

Quindi, nel tuo css, assicurati di averlo

 .hidden{ display:none; } 

So che questa domanda ha avuto risposta. Ma il mio requisito era leggermente diverso. Invece di valore volevo filtrare per testo. Così ho modificato la risposta di @William Herry in questo modo.

 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(''); }); } 

In questo modo è ansible utilizzare il valore anche sostituendo contiene come questo

  $("div#ovrcateg option[value=" + this + "]").wrap(''); 

Per l’ opzione Nascondi nell’uso selezionato :

 option_node.hidden = true; # For hide selcet item option_node.hidden = false; # For show selcet item 

Dove option_node è HTMLOptionElement

PS: Non uso JQuery, ma suppongo che funzionerà:

 $('.my_select option[value="my_cool_value"]').hidden = true 

Ho trovato la cosa migliore per rimuovere completamente il DOM completamente.

 $(".form-group #selectId option[value='39']").remove(); 

Compatibile con browser incrociati. Funziona anche su IE11

$ (‘# id’). val ($ (‘# id opzione: eq (0)’). hide ());

opzione: eq (0) -hide opzione all’indice ‘0’ nella casella di selezione.