Verbergen Sie Optionen in einer Auswahlliste mit jQuery

Ich habe ein Objekt mit Schlüssel / Wert-Optionspaaren, die ich aus einer Auswahlliste ausblenden / entfernen möchte. Keiner der folgenden Optionswähler funktioniert. Was vermisse ich?

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

Für das, was es wert ist, existiert die zweite Form (mit der @) in jQuery 1.3 nicht. Das erste funktioniert nicht, weil Sie anscheinend eine variable Interpolation erwarten. Versuche dies:

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

Beachten Sie, dass dies wahrscheinlich auf verschiedene abscheuliche Arten funktioniert, wenn es titlejQuery Selector-Metazeichen enthält.

Sie können diesen X-Browser nicht ausführen. Wenn ich mich erinnere, dh Probleme hat. Am einfachsten ist es, eine geklonte Kopie der Auswahl aufzubewahren, bevor Sie Elemente entfernen. Auf diese Weise können Sie die fehlenden Elemente einfach entfernen und dann wieder anhängen.

Ich habe einen besseren Weg gefunden und es ist sehr einfach:

$("option_you_want_to_hide").wrap('<span/>')

Um es erneut anzuzeigen, suchen Sie einfach diese Option (nicht span) und $("option_you_want_to_show").unwrap().

Es wurde auf Chrome und Firefox getestet .

Hier ist mein Spin, wahrscheinlich etwas schneller aufgrund nativer DOM-Methoden

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

Dies funktioniert in Firefox 3.0, jedoch weder in MSIE 8 noch in Opera 9.62:

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

Aber anstatt eine Option zu verstecken, kann man sie einfach deaktivieren:

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

Die erste der beiden obigen Zeilen bezieht sich auf Firefox und übergibt den Fokus an die zweite Option (vorausgesetzt, sie hat den Wert = "2"). Wenn wir es weglassen, ist die Option deaktiviert, aber die Option "aktiviert" wird weiterhin angezeigt, bevor wir sie ablegen. Daher konzentrieren wir uns auf eine andere Option, um dies zu vermeiden.

Dies kann browserübergreifend erfolgen. Es ist nur eine benutzerdefinierte Programmierung erforderlich. Bitte sehen Sie meine Geige unter http://jsfiddle.net/sablefoste/YVMzt/6/ . Es wurde getestet, um in Chrome, Firefox, Internet Explorer und Safari zu funktionieren.

Kurz gesagt, ich habe ein verstecktes Feld, #optionstorein dem das Array nacheinander gespeichert wird (da Sie in JavaScript keine assoziativen Arrays haben können). Wenn Sie dann die Kategorie ändern, werden die vorhandenen Optionen analysiert (nur beim ersten Durchlauf), in die geschrieben wird #optionstore, alles gelöscht und nur die mit der Kategorie verknüpften Optionen zurückgesetzt.

HINWEIS: Ich habe dies erstellt, um andere Optionswerte als den dem Benutzer angezeigten Text zuzulassen, sodass es sehr flexibel ist.

Der 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>

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

Am besten setzen Sie deaktiviert = wahr für die Optionselemente, die Sie deaktivieren möchten, und dann im CSS-Set

option:disabled {
    display: none;
}

Selbst wenn der Browser das Ausblenden des deaktivierten Elements nicht unterstützt, kann es dennoch nicht ausgewählt werden. In Browsern, die dies unterstützen, werden sie jedoch ausgeblendet.

Schauen Sie sich diese Frage und die Antworten an -

Auswahloptionen deaktivieren ...

Wenn Sie sich Ihren Code ansehen, müssen Sie möglicherweise den Attributwert angeben

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

von jQuery-Attributselektoren

Anführungszeichen sind in den meisten Fällen optional, sollten jedoch verwendet werden, um Konflikte zu vermeiden, wenn der Wert Zeichen wie "]" enthält.

BEARBEITEN:

Ich habe gerade festgestellt, dass Sie den Titel aus dem Funktionsparameter erhalten. In diesem Fall sollte die Syntax lauten

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

In Bezug auf den Vorschlag von redsquare habe ich Folgendes getan:

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

und dann um dies umzukehren:

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

Das Problem ist, dass Internet Explorer die Methoden zum Ausblenden und Anzeigen für ausgewählte Optionen anscheinend nicht unterstützt. Ich wollte alle Optionen meiner ddlReasonCode-Auswahl ausblenden, die nicht den aktuell ausgewählten Typ als Wert des Attributs "attType" hatten.

Während das schöne Chrome ziemlich zufrieden war mit:

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

Dies ist, was IE erforderlich ist (Kinder, versuchen Sie dies nicht bei CHROME :-)):

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

Ich fand diese Verpackungsidee unter http://ajax911.com/hide-options-selecbox-jquery/

Nach dem Testen funktionieren die oben von verschiedenen, einschließlich Chaos, veröffentlichten Lösungen zum Ausblenden von Elementen jetzt in den neuesten Versionen von Firefox (66.0.4), Chrome (74.0.3729.169) und Edge (42.17134.1.0).

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

Für IE funktioniert dies nicht, Sie können die Option jedoch deaktivieren

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

und erzwingen Sie dann die Auswahl eines anderen Werts.

$("#edit-field-service-sub-cat-value").val("0");

Beachten Sie, dass für eine deaktivierte Option der Wert der Dropdown-Liste jetzt null ist und nicht der Wert der ausgewählten Option, wenn sie deaktiviert ist.

Es scheint, dass Sie auch das Attribut "ausgewählt" aktualisieren müssen. Andernfalls wird die aktuell ausgewählte Option möglicherweise weiterhin angezeigt - obwohl sie wahrscheinlich verschwindet, wenn Sie tatsächlich eine Option auswählen (das hat sie für mich getan): Versuchen Sie Folgendes:

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

Ich habe versucht, Optionen aus einer Auswahlliste basierend auf der ausgewählten Option aus einer anderen Auswahlliste auszublenden. Es funktionierte in Firefox3, aber nicht in Internet Explorer 6. Ich habe hier einige Ideen und habe jetzt eine Lösung, daher möchte ich Folgendes mitteilen:

Der JavaScript-Code

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

Der HTML

<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>

Es wurde als in Firefox 3 und Internet Explorer 6 funktionierend überprüft.

Um eine Verkettung von Zeichenfolgen zu vermeiden, können Sie jQuery.grep verwenden

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

Wahrscheinlich nicht so elegant oder wiederverwendbar wie ein JQuery-Plugin. Ein anderer Ansatz besteht darin, Optionselemente einfach zu speichern und nach Bedarf auszutauschen:

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



        };

Tun Sie dies, um das Objekt zu verwenden:

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

Ich habe eine Lösung implementiert, die eine Funktion verwendet, die eine Combobox ( <select>) basierend auf benutzerdefinierten Datenattributen filtert . Diese Lösung unterstützt:

• Ein Having <option>zeigen , wenn der Filter die Auswahl leer lassen würde.
• Respektiert vorhandene ausgewählte Attribute.
• <option> Elemente ohne das Datenfilterattribut bleiben unberührt.

Getestet mit jQuery 2.1.4 und Firefox, Chrome, Safari und IE 10+.

Dies ist das Beispiel-HTML:

<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>

Der jQuery-Code für die Filterung:

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

Um es zu verwenden, rufen Sie einfach die Funktion mit dem Wert auf, den Sie behalten möchten.

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

Die resultierende Auswahl lautet dann:

<select id="myCombobox">
  <option data-filter="2" value="CCC">Option 3</option>
  <option data-filter="2" value="DDD">Option 4</option>
</select>

Die ursprünglichen Elemente werden von der Funktion data () gespeichert, sodass bei nachfolgenden Aufrufen die richtigen Elemente hinzugefügt und entfernt werden.

Die Antwort weist darauf hin, dass dies @für neuere jQuery-Iterationen ungültig ist. Während dies korrekt ist, verbergen einige ältere IEs immer noch keine Optionselemente. Für alle, die sich mit dem Ausblenden von Optionselementen in den betroffenen Versionen befassen müssen, habe ich hier eine Problemumgehung veröffentlicht:

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

Wickeln Sie es einfach mit einer Spannweite ein und ersetzen Sie es in der Ausstellung.

Jeder, der über diese Frage stolpert, könnte auch die Verwendung von Chosen in Betracht ziehen , was die Möglichkeiten von Select erheblich erweitert.

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

Dann stellen Sie in Ihrem CSS sicher, dass Sie haben

.hidden{
    display:none;
}

Ich weiß, dass diese Frage beantwortet wurde. Aber meine Anforderung war etwas anders. Anstelle von Wert wollte ich nach Text filtern. Also habe ich die Antwort von @William Herry so geändert.

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

Auf diese Weise können Sie den Wert auch verwenden, indem Sie solche Einträge ersetzen

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

Für die Option zum Ausblenden wählen Sie :

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

Wo option_node ist HTMLOptionElement

PS: Ich benutze JQuery nicht, aber ich vermute, dass es funktionieren wird:

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

Ich fand es am besten, das DOM einfach vollständig zu entfernen.

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

Browserübergreifend kompatibel. Funktioniert auch mit IE11

 $('#id').val($('#id option:eq(0)').hide());

Option: eq (0) - Option am Index '0' im Auswahlfeld ausblenden.

Sie können mit / auszublenden zeigen Wert oder Klassenname. Überprüfen Sie den folgenden Link mit dem Arbeitsbeispiel.
Jquery ausgewählte Optionen mit Wert oder Klassennamen ein- / ausblenden.

$ ("# ddtypeoftraining option [value = 5]"). css ("display", "none"); $ ('# ddtypeoftraining'). selectpicker ('refresh');