ซ่อนตัวเลือกในรายการที่เลือกโดยใช้ jQuery

ฉันมีวัตถุที่มีคู่คีย์ / ค่าของตัวเลือกที่ฉันต้องการซ่อน / ลบออกจากรายการที่เลือก ตัวเลือกอ็อพชันต่อไปนี้ไม่ทำงาน ฉันขาดอะไรไป?

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

สำหรับสิ่งที่คุ้มค่ารูปแบบที่สอง (พร้อมด้วย@) ไม่มีอยู่ใน jQuery 1.3 อย่างแรกใช้ไม่ได้เพราะคุณคาดหวังว่าจะมีการแก้ไขตัวแปร ลองสิ่งนี้:

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

โปรดทราบว่าสิ่งนี้อาจแตกด้วยวิธีที่น่ากลัวต่างๆหากtitleมีตัวเลือกตัวเลือก jQuery

คุณไม่สามารถทำ x-browser นี้ได้ ถ้าฉันจำได้ว่ามีปัญหา สิ่งที่ง่ายที่สุดที่จะทำคือเก็บสำเนาของสิ่งที่เลือกไว้ก่อนที่คุณจะลบรายการซึ่งจะช่วยให้คุณสามารถลบและผนวกรายการที่หายไปกลับได้อย่างง่ายดาย

ฉันพบวิธีที่ดีกว่าและมันง่ายมาก:

$("option_you_want_to_hide").wrap('<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 (สมมติว่ามีค่า = "2") หากเราละเว้นตัวเลือกนั้นจะถูกปิดใช้งาน แต่ตัวเลือกนี้จะยังคงแสดงตัวเลือก "เปิดใช้งาน" ก่อนที่เราจะวางลง ดังนั้นเราจึงโฟกัสไปที่ตัวเลือกอื่นเพื่อหลีกเลี่ยงปัญหานี้

สามารถทำได้ข้ามเบราว์เซอร์ เพียงแค่ใช้การเขียนโปรแกรมแบบกำหนดเอง โปรดดูไวโอลินของฉันที่http://jsfiddle.net/sablefoste/YVMzt/6/ ได้รับการทดสอบแล้วว่าทำงานใน Chrome, Firefox, Internet Explorer และ Safari

ในระยะสั้นฉันมีฟิลด์ที่ซ่อนอยู่#optionstoreซึ่งเก็บอาร์เรย์ตามลำดับ (เนื่องจากคุณไม่สามารถมี Associative Arrays ใน 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

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

หมายเหตุสำหรับตัวเลือกที่ปิดใช้งานค่าของรายการแบบเลื่อนลงจะเป็นค่าว่างไม่ใช่ค่าของตัวเลือกที่เลือกหากปิดใช้งาน

ดูเหมือนว่าคุณจะต้องอัปเดตแอตทริบิวต์ "ที่เลือก" ด้วย มิฉะนั้นตัวเลือกที่เลือกในปัจจุบันอาจยังคงแสดงต่อไป - แม้ว่าอาจจะหายไปเมื่อคุณไปเลือกตัวเลือก (นั่นคือสิ่งที่ให้ฉัน): ลองทำสิ่งนี้:

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

ฉันใช้วิธีแก้ปัญหาโดยใช้ฟังก์ชันที่กรอง combobox ( <select>) ตามแอตทริบิวต์ข้อมูลที่กำหนดเอง โซลูชันนี้รองรับ:

• มีการ<option>แสดงเวลาที่ตัวกรองจะปล่อยให้สิ่งที่เลือกว่างไว้
• เคารพแอตทริบิวต์ที่เลือกที่มีอยู่
• <option> องค์ประกอบที่ไม่มีแอตทริบิวต์ตัวกรองข้อมูลจะไม่ถูกแตะต้อง

ทดสอบกับ 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ซึ่งช่วยเพิ่มขีดความสามารถในการเลือกได้อย่างมาก

ฉันรู้ว่าคำถามนี้ได้รับคำตอบแล้ว แต่ความต้องการของฉันแตกต่างกันเล็กน้อย แทนที่จะเป็นค่าฉันต้องการกรองตามข้อความ ฉันจึงแก้ไขคำตอบโดย @ 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/>');
   });
}

วิธีนี้คุณสามารถใช้ value ได้โดยการแทนที่มีดังนี้

 $("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

PS: ฉันไม่ได้ใช้ JQuery แต่เดาว่ามันจะใช้งานได้:

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

ฉันพบว่าดีที่สุดเพียงแค่ลบ DOM ออกทั้งหมด

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

เข้ากันได้กับเบราว์เซอร์ข้าม ทำงานบน IE11 ด้วย

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

ตัวเลือก: eq (0) - ซ่อนตัวเลือกที่ดัชนี '0' ในกล่องเลือก

คุณสามารถแสดง / ซ่อนด้วยค่าหรือชื่อคลาส ตรวจสอบลิงค์ด้านล่างพร้อมตัวอย่างการทำงาน
แสดง / ซ่อน jquery ตัวเลือกที่เลือกด้วยค่าหรือด้วยชื่อคลาส

$ ("# ddtypeoftraining option [value = 5]"). css ("display", "none"); $ ('# ddtypeoftraining'). selectpicker ('รีเฟรช');