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;
}
}
이 질문과 답변을보세요-
코드를 보면 속성 값을 인용해야 할 수도 있습니다.
$("#edit-field-service-sub-cat-value option[value='title']").hide();
대부분의 경우 따옴표는 선택 사항이지만 값에 "]"와 같은 문자가 포함 된 경우 충돌을 피하기 위해 사용해야합니다.
편집하다:
함수 매개 변수에서 제목을 얻는다는 것을 깨달았습니다.이 경우 구문은
$("#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);
가장 좋은 방법은 비활성화하려는 옵션 항목에 disabled = true를 설정 한 다음 CSS 세트에서 설정하는 것입니다.
option:disabled {
display: none;
}
이렇게하면 브라우저가 비활성화 된 항목 숨기기를 지원하지 않더라도 여전히 선택할 수 없습니다. 그러나 이를 지원하는 브라우저에서는 숨겨집니다.
문제는 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>elements without the data-filter attribute are left untouched.
Tested with jQuery 2.1.4 and Firefox, Chrome, Safari and IE 10+.
This is the example 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>
The jQuery code for the filtering:
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());
}
}
To use it, you just call the function with the value you want to keep.
filterCombobox($("#myCombobox"), 2, true);
Then the resulting select will be:
<select id="myCombobox">
<option data-filter="2" value="CCC">Option 3</option>
<option data-filter="2" value="DDD">Option 4</option>
</select>
The original elements are stored by the data() function, so subsequent calls will add and remove the correct elements.
The answer points out that @ is invalid for newer jQuery iterations. While that's correct, some older IEs still dont hide option elements. For anyone having to deal with hiding option elements in those versions affected, I posted a workaround here:
http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/
Basically just wrap it with a span and replace on show.
Anybody stumbling across this question might also consider the use of Chosen, which greatly expands the capabilities of selects.
$("option_you_want_to_hide").addClass('hidden')
Then, in your css make sure you have
.hidden{
display:none;
}
I know this question has been answered. But my requirement was slightly different. Instead of value I wanted to filter by text. So i modified the answer by @William Herry like this.
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/>');
});
}
This way you can use value also by replacing contains like this
$("div#ovrcateg option[value=" + this + "]").wrap('<span/>');
For hide option in select use:
option_node.hidden = true; # For hide selcet item
option_node.hidden = false; # For show selcet item
Where option_node is HTMLOptionElement
P.S.: I do not use JQuery, but guessing, that it's will works:
$('.my_select option[value="my_cool_value"]').hidden = true
I found it best to just remove the DOM completely.
$(".form-group #selectId option[value='39']").remove();
Cross browser compatible. Works on IE11 too
You can show/hide with Value or Class name. Check the below link with working example.
Show/hide jquery chosen options with value or with class name.
$('#id').val($('#id option:eq(0)').hide());
option:eq(0)-hide option at index '0' in select box.
참고URL : https://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-using-jquery
'code' 카테고리의 다른 글
| 자바 스크립트의 클래스에서 상속하는 방법은 무엇입니까? (0) | 2020.08.24 |
|---|---|
| "여기에서 git-bash 열기…"컨텍스트 메뉴를 Windows 탐색기에 추가하는 방법은 무엇입니까? (0) | 2020.08.24 |
| EntityType 'IdentityUserLogin'에 정의 된 키가 없습니다. (0) | 2020.08.24 |
| 번들에 NIB를로드 할 수 없습니다. (0) | 2020.08.24 |
| 누군가가 방향성 비순환 그래프가 무엇인지 간단한 용어로 설명 할 수 있습니까? (0) | 2020.08.24 |