Sembunyikan opsi dalam daftar pilih menggunakan jQuery

Saya memiliki objek dengan pasangan kunci / nilai opsi yang ingin saya sembunyikan / hapus dari daftar pilihan. Tak satu pun dari pemilih opsi berikut berfungsi. Apa yang saya lewatkan?

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

Untuk apa nilainya, bentuk kedua (dengan @) tidak ada di jQuery 1.3. Yang pertama tidak berfungsi karena Anda tampaknya mengharapkan interpolasi variabel. Coba ini:

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

Perhatikan bahwa ini mungkin akan rusak dengan berbagai cara yang mengerikan jika titleberisi metakarakter pemilih jQuery.

Anda tidak dapat melakukan x-browser ini. Jika saya ingat yaitu memiliki masalah. Hal termudah untuk dilakukan adalah menyimpan salinan hasil kloning dari pilihan sebelum Anda menghapus item, ini memungkinkan Anda untuk dengan mudah menghapus dan kemudian menambahkan kembali item yang hilang.

Saya menemukan cara yang lebih baik, dan itu sangat sederhana:

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

Untuk menampilkan lagi, cukup temukan opsi itu (bukan rentang) dan $("option_you_want_to_show").unwrap().

Itu telah diuji di Chrome dan Firefox.

Inilah putaran saya, kemungkinan sedikit lebih cepat karena metode DOM asli

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

Ini berfungsi di Firefox 3.0, tetapi tidak di MSIE 8, atau di Opera 9.62:

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

Melainkan menyembunyikan opsi, seseorang dapat menonaktifkannya:

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

Yang pertama dari dua baris di atas adalah untuk Firefox dan meneruskan fokus ke opsi ke-2 (dengan asumsi ini memiliki nilai = "2"). Jika kita menghilangkannya, opsi tersebut dinonaktifkan, tetapi masih menampilkan opsi "diaktifkan" sebelum kami menjatuhkannya. Karenanya, kami mengalihkan fokus ke opsi lain untuk menghindari ini.

Ini BISA dilakukan lintas browser; ini hanya membutuhkan beberapa pemrograman khusus. Silakan lihat biolaku di http://jsfiddle.net/sablefoste/YVMzt/6/ . Ini telah diuji untuk bekerja di Chrome, Firefox, Internet Explorer, dan Safari.

Singkatnya, saya memiliki bidang tersembunyi, #optionstore , yang menyimpan array secara berurutan (karena Anda tidak dapat memiliki Associative Arrays di JavaScript). Kemudian ketika Anda mengubah kategori, itu mem-parsing opsi yang ada (pertama kali hanya sampai) menulisnya ke #optionstore, menghapus semuanya, dan mengembalikan hanya yang terkait dengan kategori.

CATATAN: Saya membuat ini untuk memungkinkan nilai opsi yang berbeda dari teks yang ditampilkan kepada pengguna, jadi ini sangat fleksibel.

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

Taruhan terbaik Anda adalah menyetel disabled = true pada item opsi yang ingin Anda nonaktifkan, lalu di set CSS

option:disabled {
    display: none;
}

Dengan cara itu bahkan jika browser tidak mendukung menyembunyikan item cacat, masih tidak dapat dipilih .. tapi pada browser yang tidak mendukung hal itu, mereka akan disembunyikan.

Lihatlah pertanyaan ini dan jawabannya -

Nonaktifkan opsi pilih ...

Melihat kode Anda, Anda mungkin perlu mengutip nilai atribut

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

dari pemilih atribut jQuery

Kutipan bersifat opsional dalam banyak kasus, tetapi sebaiknya digunakan untuk menghindari konflik ketika nilai berisi karakter seperti "]"

EDIT:

Baru menyadari bahwa Anda mendapatkan judul dari parameter fungsi, dalam hal ini sintaksnya harus

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

Mengacu pada saran redsquare, saya akhirnya melakukan ini:

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

dan kemudian untuk membalikkan ini:

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

Masalahnya adalah bahwa Internet Explorer tampaknya tidak mendukung metode sembunyikan dan tampilkan untuk opsi tertentu. Saya ingin menyembunyikan semua opsi pilih ddlReasonCode saya yang tidak memiliki jenis yang saat ini dipilih sebagai nilai atribut "attType".

Sementara Chrome yang cantik cukup puas dengan:

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

Inilah yang diperlukan IE (anak-anak, jangan coba ini di 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);
                    }
                }
            });

Saya menemukan ide pembungkus itu di http://ajax911.com/hide-options-selecbox-jquery/

Setelah diuji, solusi yang diposting di atas oleh berbagai, termasuk kekacauan, untuk menyembunyikan elemen sekarang berfungsi di versi terbaru Firefox (66.0.4), Chrome (74.0.3729.169) dan 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();

Untuk IE, ini tidak berfungsi, namun Anda dapat menonaktifkan opsinya

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

dan kemudian memaksakan pemilihan nilai yang berbeda.

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

Perhatikan, untuk opsi yang dinonaktifkan, val dari drop-down sekarang akan menjadi null, bukan nilai opsi yang dipilih jika dinonaktifkan.

Tampaknya Anda juga harus memperbarui atribut "dipilih". Jika tidak, opsi yang saat ini dipilih dapat terus ditampilkan - meskipun mungkin akan hilang ketika Anda benar-benar memilih opsi (itulah yang dilakukannya untuk saya): Coba lakukan ini:

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

Saya mencoba menyembunyikan opsi dari satu daftar-pilih berdasarkan opsi yang dipilih dari daftar-pilih lain. Itu berfungsi di Firefox3, tetapi tidak di Internet Explorer 6. Saya mendapat beberapa ide di sini dan memiliki solusi sekarang, jadi saya ingin berbagi:

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

Itu diperiksa karena berfungsi di Firefox 3 dan Internet Explorer 6.

Untuk menghindari penggabungan string, Anda dapat menggunakan jQuery.grep

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

Mungkin tidak seanggun atau dapat digunakan kembali seperti plugin jquery. tetapi pendekatan lain adalah dengan hanya menyimpan elemen opsi dan menukarnya sesuai kebutuhan:

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



        };

lakukan ini untuk menggunakan objek:

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

Saya menerapkan solusi menggunakan fungsi yang memfilter kotak kombo ( <select>) berdasarkan atribut data- khusus. Solusi ini mendukung:

• Memiliki <option>untuk menunjukkan kapan filter akan membiarkan pilihan kosong.
• Menghormati atribut terpilih yang ada.
• <option> elemen tanpa atribut data-filter tidak tersentuh.

Diuji dengan jQuery 2.1.4 dan Firefox, Chrome, Safari, dan IE 10+.

Ini adalah contoh 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>

Kode jQuery untuk pemfilteran:

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

Untuk menggunakannya, Anda cukup memanggil fungsi dengan nilai yang ingin Anda pertahankan.

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

Maka pilihan yang dihasilkan adalah:

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

Elemen asli disimpan oleh fungsi data (), jadi panggilan berikutnya akan menambah dan menghapus elemen yang benar.

Jawabannya menunjukkan bahwa @tidak valid untuk iterasi jQuery yang lebih baru. Meskipun itu benar, beberapa IE lama masih tidak menyembunyikan elemen opsi. Bagi siapa pun yang harus berurusan dengan elemen opsi persembunyian di versi yang terpengaruh, saya memposting solusi di sini:

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

Pada dasarnya bungkus saja dengan span dan replace di show.

Siapa pun yang tersandung pada pertanyaan ini mungkin juga mempertimbangkan penggunaan Chosen , yang sangat memperluas kemampuan pemilihan.

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

Kemudian, di css Anda pastikan sudah

.hidden{
    display:none;
}

Saya tahu pertanyaan ini telah terjawab. Tapi kebutuhan saya sedikit berbeda. Alih-alih nilai, saya ingin memfilter berdasarkan teks. Jadi saya memodifikasi jawaban oleh @William Herry seperti ini.

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

Dengan cara ini Anda juga dapat menggunakan nilai dengan mengganti berisi seperti ini

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

Untuk opsi sembunyikan di pilih gunakan:

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

Di mana option_node berada HTMLOptionElement

PS: Saya tidak menggunakan JQuery, tetapi menebak, itu akan berhasil:

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

Menurut saya yang terbaik adalah menghapus DOM sepenuhnya.

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

Kompatibel lintas browser. Bekerja di IE11 juga

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

opsi: eq (0) -hide opsi di indeks '0' di kotak pilih.

Anda dapat menampilkan / menyembunyikan dengan Nilai atau nama Kelas . Periksa tautan di bawah ini dengan contoh yang berfungsi.
Tampilkan / sembunyikan opsi jquery yang dipilih dengan nilai atau dengan nama kelas.

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