Скриване на опции в избран списък с помощта на jQuery

Колкото и да си струва, втората форма (с @) не съществува в jQuery 1.3. Първият не работи, защото очевидно очаквате променлива интерполация. Опитайте тази:

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

Обърнете внимание, че това вероятно ще се повреди по различни отвратителни начини, ако title съдържа метасимволи на jQuery селектор.

Не можете да направите това x-браузър. Ако си спомням, т.е. има проблеми. Най-лесното нещо, което можете да направите, е да запазите клонирано копие на избраното, преди да премахнете елементи, това ви позволява лесно да премахнете и след това да добавите обратно липсващите елементи.

Намерих по-добър начин и той е много прост:

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

За да се покаже отново, просто намерете тази опция (не span) и $("option_you_want_to_show").unwrap().

Тестван е в Chrome и Firefox.

Ето моето въртене, вероятно малко по-бързо поради родните DOM методи

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

Това работи във Firefox 3.0, но не и в MSIE 8, нито в Opera 9.62:

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

Но вместо да скриете опция, можете просто да я деактивирате:

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

Първият от двата реда по-горе е за Firefox и прехвърля фокуса към втората опция (ако приемем, че има стойност = "2"). Ако го пропуснем, опцията е деактивирана, но все още показва опцията „разрешено“, преди да я пуснем. Следователно прехвърляме фокуса върху друга опция, за да избегнем това.

МОЖЕ да се направи между браузъри; просто е необходимо малко персонализирано програмиране. Моля, вижте моята цигулка на http://jsfiddle.net/sablefoste/YVMzt/6/. Беше тестван за работа в Chrome, Firefox, Internet Explorer и Safari.

Накратко, имам скрито поле, #optionstore, което съхранява масива последователно (тъй като не можете да имате асоциативни масиви в JavaScript). След това, когато промените категорията, тя анализира съществуващите опции (само за първи път), записва ги в #optionstore, изтрива всичко и връща само тези, свързани с категорията.

ЗАБЕЛЕЖКА: Създадох това, за да позволя различни стойности на опции от текста, показван на потребителя, така че е много гъвкаво.

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

Най-добрият ви залог е да зададете disabled=true на опциите, които искате да деактивирате, след това в CSS set

option:disabled {
    display: none;
}

По този начин, дори ако браузърът не поддържа скриване на деактивирания елемент, той пак не може да бъде избран... но в браузъри, които го го поддържат, те ще бъдат скрити.

Разгледайте този въпрос и отговорите -

Деактивиране на селекция опции...

Гледайки вашия код, може да се наложи да цитирате стойността на атрибута

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

от селектори на jQuery атрибути

В повечето случаи кавичките не са задължителни, но трябва да се използват, за да се избегнат конфликти, когато стойността съдържа знаци като "]"

РЕДАКТИРАНЕ:

Току-що осъзнах, че получавате заглавието от параметъра на функцията, в който случай трябва да бъде синтаксисът

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

Във връзка с предложението на redsquare, в крайна сметка направих това:

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

и след това да обърнете това:

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

Проблемът е, че Internet Explorer изглежда не поддържа методите за скриване и показване за избрани опции. Исках да скрия всички опции на моя избор на ddlReasonCode, които нямаха текущо избрания тип като стойност на атрибута "attType".

Докато прекрасният Chrome беше доста доволен от:

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

Това е, което IE изисква (деца, не опитвайте това в 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);
                    }
                }
            });

Намерих тази идея за обвиване на http://ajax911.com/hide-options-selecbox-jquery/

След тестване решенията, публикувани по-горе от различни, включително хаос, за скриване на елементи вече работят в най-новите версии на Firefox (66.0.4), Chrome (74.0.3729.169) и 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();

За IE това не работи, но можете да деактивирате опцията

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

и след това принудете избора на различна стойност.

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

Обърнете внимание, че за деактивирана опция стойността на падащото меню вече ще бъде нула, а не стойността на избраната опция, ако е деактивирана.

Изглежда, че трябва да актуализирате и атрибута "selected". В противен случай текущо избраната опция може да продължи да се показва - въпреки че вероятно ще изчезне, когато наистина отидете да изберете опция (това направи за мен): Опитайте да направите това:

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

Опитвах се да скрия опции от един списък за избор въз основа на избраната опция от друг списък за избор. Работеше във Firefox3, но не и в Internet Explorer 6. Получих някои идеи тук и сега имам решение, така че бих искал да споделя:

Кодът на JavaScript

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

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>

Беше проверено дали работи във Firefox 3 и Internet Explorer 6.

За да избегнете конкатенация на низове, можете да използвате jQuery.grep

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

Вероятно не е толкова елегантен или толкова многократно използваем като jquery плъгин. но друг подход е просто да запазите елементите на опцията и да ги размените според изискванията:

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



        };

направете това, за да използвате обекта:

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

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

След това във вашия css се уверете, че имате

.hidden{
    display:none;
}

Приложих решение с помощта на функция, която филтрира комбинирано поле (<select>) въз основа на потребителски атрибути на данни. Това решение поддържа:

• Наличие на <option> за показване кога филтърът ще остави полето за избор празно.
• Уважава съществуващите избрани атрибути.
• <option> елемента без атрибута data-filter остават недокоснати.

Тестван с jQuery 2.1.4 и Firefox, Chrome, Safari и IE 10+.

Това е примерният 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>

Кодът на jQuery за филтриране:

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

За да го използвате, просто извиквате функцията със стойността, която искате да запазите.

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

Тогава резултантният избор ще бъде:

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

Оригиналните елементи се съхраняват от функцията data(), така че следващите извиквания ще добавят и премахват правилните елементи.

Отговорът посочва, че @ е невалиден за по-нови итерации на jQuery. Въпреки че това е правилно, някои по-стари IE все още не крият елементите на опциите. За всеки, който трябва да се справя със скриване на елементи от опциите в тези засегнати версии, публикувах заобиколно решение тук:

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

По принцип просто го увийте с педя и го сменете при показване.

Всеки, който се натъкне на този въпрос, може също да обмисли използването на Chosen, което значително разширява възможностите на selects.

Знам, че на този въпрос е отговорено. Но моето изискване беше малко по-различно. Вместо стойност исках да филтрирам по текст. Така че промених отговора от @William Herry по този начин.

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

По този начин можете да използвате стойност и чрез замяна на съдържа по този начин

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

За опция за скриване в избор използвайте:

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

Където option_node е HTMLOptionElement

P.S.: Не използвам JQuery, но предполагам, че ще работи:

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

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

option:eq(0)-скрий опцията при индекс '0' в полето за избор.

Можете да показвате/скривате с име на стойност или клас. Вижте връзката по-долу с работещ пример.
Показване/скриване на избраните от jquery опции със стойност или с име на клас.

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

Открих, че е най-добре просто да премахна напълно DOM.

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

Съвместим с различни браузъри. Работи и на IE11