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

titlejQuery 선택기 메타 문자 가 포함 된 경우 여러 가지 끔찍한 방식으로 중단 될 수 있습니다.

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

이것은 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 용이며 두 번째 옵션에 포커스를 전달합니다 (value = "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 세트에서 설정하는 것입니다.

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가 선택 옵션에 대한 숨기기 및 표시 방법을 지원하지 않는 것 같습니다. 속성 "attType"의 값으로 현재 선택된 유형이없는 ddlReasonCode select의 모든 옵션을 숨기고 싶었습니다.

사랑스러운 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");

비활성화 된 옵션의 경우 드롭 다운 값이 이제 비활성화 된 경우 선택한 옵션의 값이 아닌 null이됩니다.

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

$('#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에서는 작동하지 않았습니다. 여기에서 몇 가지 아이디어를 얻었고 지금 해결책이 있으므로 공유하고 싶습니다.

자바 스크립트 코드

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

<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 사용을 고려할 수도 있습니다 .

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

그런 다음 CSS에서

.hidden{
    display:none;
}

이 질문에 대한 답변을 알고 있습니다. 그러나 내 요구 사항은 약간 달랐습니다. 가치 대신 텍스트로 필터링하고 싶었습니다. 그래서 @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

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

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

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

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

option : eq (0)-선택 상자의 인덱스 '0'에서 옵션을 숨 깁니다.

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

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