Ẩn các tùy chọn trong danh sách đã chọn bằng jQuery

Tôi có một đối tượng với các cặp tùy chọn khóa / giá trị mà tôi muốn ẩn / xóa khỏi danh sách đã chọn. Cả hai bộ chọn tùy chọn sau đều không hoạt động. Tôi đang thiếu gì?

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

Đối với giá trị của nó, biểu mẫu thứ hai (với @) không tồn tại trong jQuery 1.3. Đầu tiên không hoạt động vì bạn dường như đang mong đợi nội suy biến. Thử cái này:

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

Lưu ý rằng điều này có thể sẽ bị phá vỡ theo nhiều cách ghê tởm khác nhau nếu titlechứa siêu ký tự bộ chọn jQuery.

Bạn không thể thực hiện trình duyệt x này. Nếu tôi nhớ lại tức là có vấn đề. Điều dễ dàng nhất để làm là giữ một bản sao của lựa chọn trước khi bạn xóa các mục, điều này cho phép bạn dễ dàng xóa và sau đó nối các mục bị thiếu lại.

Tôi đã tìm thấy một cách tốt hơn, và nó rất đơn giản:

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

Để hiển thị lại, chỉ cần tìm tùy chọn đó (không kéo dài) và $("option_you_want_to_show").unwrap().

Nó đã được thử nghiệm trên Chrome và Firefox.

Đây là vòng quay của tôi, có thể nhanh hơn một chút do các phương thức DOM gốc

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

Điều này hoạt động trong Firefox 3.0, nhưng không hoạt động trong MSIE 8, cũng không phải trong Opera 9.62:

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

Nhưng thay vì ẩn một tùy chọn, người ta có thể chỉ cần vô hiệu hóa nó:

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

Dòng đầu tiên trong hai dòng trên là dành cho Firefox và chuyển tiêu điểm cho tùy chọn thứ 2 (giả sử nó có giá trị = "2"). Nếu chúng tôi bỏ qua nó, tùy chọn sẽ bị vô hiệu hóa, nhưng tùy chọn vẫn hiển thị tùy chọn "đã bật" trước khi chúng tôi thả nó xuống. Do đó, chúng tôi chuyển tiêu điểm sang một tùy chọn khác để tránh điều này.

Nó CÓ THỂ được thực hiện trên nhiều trình duyệt; nó chỉ cần một số lập trình tùy chỉnh. Vui lòng xem fiddle của tôi tại http://jsfiddle.net/sablefoste/YVMzt/6/ . Nó đã được thử nghiệm để hoạt động trong Chrome, Firefox, Internet Explorer và Safari.

Tóm lại, tôi có một trường ẩn, trường #optionstorenày lưu trữ mảng theo tuần tự (vì bạn không thể có Mảng liên kết trong JavaScript). Sau đó, khi bạn thay đổi danh mục, nó sẽ phân tích cú pháp các tùy chọn hiện có (chỉ đến lần đầu tiên) sẽ ghi chúng vào #optionstore, xóa mọi thứ và chỉ đặt lại những tùy chọn được liên kết với danh mục.

LƯU Ý: Tôi tạo điều này để cho phép các giá trị tùy chọn khác nhau từ văn bản được hiển thị cho người dùng, vì vậy nó rất linh hoạt.

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

Đặt cược tốt nhất của bạn là đặt vô hiệu hóa = true trên các mục tùy chọn bạn muốn tắt, sau đó đặt trong CSS

option:disabled {
    display: none;
}

Bằng cách đó ngay cả khi trình duyệt không hỗ trợ giấu mục tàn tật, nó vẫn có thể không được lựa chọn .. nhưng trên các trình duyệt làm hỗ trợ nó, họ sẽ được ẩn.

Hãy xem câu hỏi này và câu trả lời -

Tắt các tùy chọn đã chọn ...

Nhìn vào mã của bạn, bạn có thể cần phải trích dẫn giá trị thuộc tính

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

từ bộ chọn thuộc tính jQuery

Dấu ngoặc kép là tùy chọn trong hầu hết các trường hợp, nhưng nên được sử dụng để tránh xung đột khi giá trị chứa các ký tự như "]"

BIÊN TẬP:

Chỉ cần nhận ra rằng bạn đang lấy tiêu đề từ tham số hàm, trong trường hợp đó, cú pháp phải là

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

Tham khảo đề xuất của redsquare, tôi đã kết thúc việc này:

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

và sau đó để đảo ngược điều này:

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

Vấn đề là Internet Explorer dường như không hỗ trợ các phương pháp ẩn và hiển thị cho các tùy chọn được chọn. Tôi muốn ẩn tất cả các tùy chọn của lựa chọn ddlReasonCode không có loại hiện được chọn làm giá trị của thuộc tính "attType".

Trong khi Chrome đáng yêu khá hài lòng với:

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

Đây là những gì IE yêu cầu (trẻ em, đừng thử điều này tại 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);
                    }
                }
            });

Tôi tìm thấy ý tưởng gói đó tại http://ajax911.com/hide-options-selecbox-jquery/

Sau khi thử nghiệm, các giải pháp được đăng ở trên bởi nhiều người, bao gồm cả hỗn loạn, để ẩn các phần tử hiện hoạt động trong các phiên bản mới nhất của Firefox (66.0.4), Chrome (74.0.3729.169) và 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();

Đối với IE, điều này không hoạt động, tuy nhiên bạn có thể tắt tùy chọn

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

và sau đó buộc chọn một giá trị khác.

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

Lưu ý, đối với một tùy chọn bị vô hiệu hóa, giá trị của menu thả xuống bây giờ sẽ là giá trị rỗng, không phải là giá trị của tùy chọn đã chọn nếu nó bị vô hiệu hóa.

Có vẻ như bạn cũng phải cập nhật thuộc tính "đã chọn". Nếu không, tùy chọn hiện được chọn có thể tiếp tục hiển thị - mặc dù nó có thể sẽ biến mất khi bạn thực sự đi chọn một tùy chọn (đó là những gì nó đã làm cho tôi): Hãy thử làm điều này:

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

Tôi đang cố ẩn các tùy chọn khỏi một danh sách chọn dựa trên tùy chọn đã chọn từ một danh sách chọn khác. Nó đã hoạt động trong Firefox3, nhưng không hoạt động trong Internet Explorer 6. Tôi có một số ý tưởng ở đây và hiện có giải pháp, vì vậy tôi muốn chia sẻ:

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

Nó đã được kiểm tra là hoạt động trong Firefox 3 và Internet Explorer 6.

Để tránh nối chuỗi, bạn có thể sử dụng jQuery.grep

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

Có lẽ không thanh lịch hoặc có thể tái sử dụng như một plugin jquery. nhưng một cách tiếp cận khác là chỉ cần lưu các phần tử tùy chọn và hoán đổi chúng theo yêu cầu:

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



        };

làm điều này để sử dụng đối tượng:

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

Tôi đã triển khai một giải pháp bằng cách sử dụng một hàm lọc combobox ( <select>) dựa trên thuộc tính dữ liệu tùy chỉnh. Giải pháp này hỗ trợ:

• Có <option>hiển thị khi bộ lọc sẽ để trống lựa chọn.
• Tôn trọng các thuộc tính đã chọn hiện có.
• <option> các phần tử không có thuộc tính data-filter vẫn được giữ nguyên.

Đã thử nghiệm với jQuery 2.1.4 và Firefox, Chrome, Safari và IE 10+.

Đây là HTML mẫu:

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

Mã jQuery để lọc:

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

Để sử dụng nó, bạn chỉ cần gọi hàm với giá trị mà bạn muốn giữ lại.

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

Sau đó, lựa chọn kết quả sẽ là:

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

Các phần tử gốc được lưu trữ bởi hàm data (), vì vậy các cuộc gọi tiếp theo sẽ thêm và bớt các phần tử chính xác.

Câu trả lời chỉ ra rằng điều đó @không hợp lệ cho các lần lặp lại jQuery mới hơn. Mặc dù điều đó đúng, một số IE cũ hơn vẫn không ẩn các phần tử tùy chọn. Đối với bất kỳ ai phải đối phó với việc ẩn các phần tử tùy chọn trong các phiên bản bị ảnh hưởng, tôi đã đăng một giải pháp ở đây:

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

Về cơ bản, chỉ cần quấn nó với một khoảng và thay thế ngay.

Bất kỳ ai tình cờ gặp câu hỏi này cũng có thể cân nhắc việc sử dụng Chosen , điều này giúp mở rộng đáng kể khả năng của các lựa chọn.

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

Sau đó, trong css của bạn, hãy đảm bảo rằng bạn có

.hidden{
    display:none;
}

Tôi biết câu hỏi này đã được trả lời. Nhưng yêu cầu của tôi hơi khác. Thay vì giá trị tôi muốn lọc theo văn bản. Vì vậy, tôi đã sửa đổi câu trả lời của @William Herry như thế này.

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

Bằng cách này, bạn cũng có thể sử dụng giá trị bằng cách thay thế các hàm chứa như thế này

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

Đối với tùy chọn ẩn trong chọn sử dụng:

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

Trong đó option_node là HTMLOptionElement

Tái bút: Tôi không sử dụng JQuery, nhưng đoán rằng nó sẽ hoạt động:

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

Tôi thấy tốt nhất là chỉ cần loại bỏ hoàn toàn DOM.

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

Tương thích với nhiều trình duyệt. Hoạt động trên IE11 nữa

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

option: eq (0) -hide option tại chỉ mục '0' trong hộp chọn.

Bạn có thể hiển thị / ẩn với tên Giá trị hoặc Lớp . Kiểm tra liên kết dưới đây với ví dụ làm việc.
Hiển thị / ẩn các tùy chọn jquery đã chọn với giá trị hoặc với tên lớp.

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