jQuery를 사용하여 선택 목록의 옵션 숨기기

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

.@ 1. jQuery 1.3에는 없습니다.첫 번째는 가변 보간법을 예상하고 있기 때문에 작동하지 않습니다.사용해 보십시오.

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

참고로 이것은 아마도 다양한 흉측한 방식으로 부서질 것입니다.title 선택기 j가 포함되어 .Query 선택기 메타 문자가 포함되어 있습니다.

이 x 브라우저는 실행할 수 없습니다.내 기억으로는 문제가 있는 것 같습니다.가장 쉬운 방법은 항목을 제거하기 전에 선택 항목의 복제 사본을 보관하는 것입니다. 이렇게 하면 누락된 항목을 쉽게 제거한 다음 다시 추가할 수 있습니다.

저는 더 나은 방법을 찾았고, 그것은 매우 간단합니다.

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

브라우저를 통해 수행할 수 있습니다. 맞춤형 프로그래밍이 필요합니다.http://jsfiddle.net/sablefoste/YVMzt/6/ 에서 제 바이올린을 보세요.Chrome, Firefox, Internet Explorer 및 Safari에서 작동하는 것으로 테스트되었습니다.

간단히 말해서, 나는 숨겨진 분야를 가지고 있습니다.#optionstore배열을 순차적으로 저장합니다(JavaScript에는 Associative Arrays를 사용할 수 없기 때문).범주를 끝까지만)을 구문 분석하여 런그다처범이기옵존션변면경하구다문분 (니음끝터만지까됩석부주음를이처)▁then)다끝▁()로 .#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;
    }
}

이것은 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"인 경우).이 옵션을 생략하면 옵션이 비활성화되지만 드롭다운하기 전에 "활성화" 옵션이 계속 표시됩니다.따라서 이 문제를 방지하기 위해 다른 옵션에 초점을 맞춥니다.

이 질문과 답을 보세요.

선택 옵션 사용 안 함...

코드를 보면 속성 값을 따옴표로 묶어야 할 수 있습니다.

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

jQuery 특성 선택기에서

대부분의 경우 따옴표는 선택 사항이지만 값에 "]와 같은 문자가 포함된 경우 충돌을 방지하기 위해 사용해야 합니다.

편집:

함수 매개 변수에서 제목을 얻는다는 것을 방금 깨달았는데, 이 경우 구문은 다음과 같아야 합니다.

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

가장 좋은 방법은 비활성화할 옵션 항목에서 비활성화=true를 설정한 다음 CSS 집합에서 비활성화하는 것입니다.

option:disabled {
    display: none;
}

그러면 브라우저가 비활성화된 항목을 숨기는 것을 지원하지 않더라도 선택할 수 없습니다.하지만 이를 지원하는 브라우저에서는 숨겨집니다.

붉은 광장의 제안을 참고하여, 저는 결국 다음과 같이 했습니다.

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

그리고 나서 이것을 뒤집습니다.

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

테스트한 결과, 요소를 숨기기 위해 혼돈을 포함하여 위에 게시된 다양한 솔루션이 현재 최신 버전의 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");

비활성화된 옵션의 경우 드롭다운 값이 null이 되며 비활성화된 경우 선택한 옵션의 값은 null이 아닙니다.

문제는 Internet Explorer(인터넷 익스플로러)가 선택 옵션에 대한 숨기기 및 표시 방법을 지원하지 않는 것 같습니다.현재 선택한 유형이 아닌 ddlReasonCode 선택 항목의 모든 옵션을 "attType" 속성 값으로 숨기고 싶었습니다.

사랑스러운 Chrome은 다음과 같이 매우 만족했습니다.

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

이것이 IE가 요구한 것입니다(어린이 여러분, 크롬에서 이것을 시도하지 마십시오:-):

//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/ 에서 찾았습니다.

"선택한" 특성도 업데이트해야 하는 것 같습니다.그렇지 않으면 현재 선택한 옵션이 계속 표시될 수 있습니다. 실제로 선택한 옵션을 선택하면 해당 옵션이 사라질 수도 있습니다.다음을 시도:

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

다른 선택 목록에서 선택한 옵션을 기준으로 한 선택 목록에서 옵션을 숨기려고 했습니다.Firefox 3에서는 작동했지만 Internet Explorer 6에서는 작동하지 않았습니다.여기서 몇 가지 아이디어와 해결책이 있습니다. 따라서 다음과 같이 공유하고자 합니다.

자바스크립트 코드

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>

파이어폭스 3과 인터넷 익스플로러 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>

원래 요소는 데이터() 기능에 의해 저장되므로, 이후 호출에서는 올바른 요소를 추가하거나 제거합니다.

답은 다음을 지적합니다.@최신 jQuery 반복에는 적합하지 않습니다.일부 오래된 IE는 여전히 옵션 요소를 숨기지 않습니다.영향을 받는 버전에서 옵션 요소를 숨겨야 하는 사람을 위해 다음과 같은 해결 방법을 게시했습니다.

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

기본적으로 스판으로 싸서 전시장에서 교체하면 됩니다.

이 질문에 답하지 못하는 사람은 선택 항목의 기능을 크게 확장하는 선택 항목의 사용을 고려할 수도 있습니다.

저는 이 질문에 답했다는 것을 알고 있습니다.하지만 제 요구사항은 조금 달랐습니다.값 대신 텍스트로 필터링하고 싶었습니다.그래서 저는 @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입니다.

추신: 저는 JQuery를 사용하지 않지만, 효과가 있을 것이라고 추측합니다.

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

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

옵션: 선택 상자의 인덱스 '0'에 있는 eq(0)-숨기기 옵션.

값 또는 클래스 이름으로 표시/숨길 수 있습니다.아래 링크와 작동 예를 확인하십시오.
선택한 옵션을 값 또는 클래스 이름으로 표시/숨깁니다.

$("#ddtype of training option[value=5]"."dtype display", "dtype of training"); $('#ddtype training').select picker(선택기);

DOM을 완전히 제거하는 것이 가장 좋습니다.

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

브라우저 간 호환.IE11에서도 작동합니다.

언급URL : https://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-using-jquery