[jquery] jQuery의 SELECT 요소에서 특정 옵션을 어떻게 선택합니까?
색인, 값 또는 텍스트를 알고있는 경우 직접 참조 할 ID가없는 경우에도 마찬가지입니다.
마크 업 예
<div class="selDiv">
<select class="opts">
<option selected value="DEFAULT">Default</option>
<option value="SEL1">Selection 1</option>
<option value="SEL2">Selection 2</option>
</select>
</div>
답변
중간 옵션 요소를 값으로 가져 오는 선택기는 다음과 같습니다.
$('.selDiv option[value="SEL1"]')
색인의 경우 :
$('.selDiv option:eq(1)')
알려진 텍스트의 경우 :
$('.selDiv option:contains("Selection 1")')
편집 : 위에서 언급했듯이 OP 드롭 다운의 선택된 항목을 변경 한 후 OP 일 수 있습니다. 버전 1.6 이상에서는 prop () 메소드가 권장됩니다.
$('.selDiv option:eq(1)').prop('selected', true)
이전 버전에서 :
$('.selDiv option:eq(1)').attr('selected', 'selected')
EDIT2 : Ryan의 의견 후. “선택 10″과 일치하는 것은 원하지 않을 수 있습니다. 나는 더 발견 선택 전체 텍스트를 일치를하지만 필터가 작동합니다 :
$('.selDiv option')
.filter(function(i, e) { return $(e).text() == "Selection 1"})
EDIT3 : $(e).text()
비교를 실패하게하는 개행을 포함 할 수 있으므로 주의하십시오 . 옵션이 암시 적으로 닫혀있을 때 발생합니다 ( </option>
태그 없음 ).
<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
:
</select>
e.text
후행 줄 바꿈과 같은 추가 공백을 사용 하면 비교가 더 강력 해집니다.
답변
위의 방법 중 어느 것도 필요한 솔루션을 제공하지 않았으므로 나에게 도움이되는 것을 제공 할 것이라고 생각했습니다.
$('#element option[value="no"]').attr("selected", "selected");
답변
val()
방법을 사용할 수 있습니다 .
$('select').val('the_value');
답변
값으로, jQuery 1.7 에서 나를 위해 일한 것은 아래 코드였습니다.
$('#id option[value=theOptionValue]').prop('selected', 'selected').change();
답변
이 작업을 수행하는 방법에는 여러 가지가 있지만에 대한 가장 많은 답변과 논쟁 중 가장 깨끗한 접근 방식이 사라졌습니다 val()
. 또한 일부 메소드는 jQuery 1.6에서 변경되었으므로 업데이트가 필요합니다.
다음 예제에서는 변수 $select
가 원하는 <select>
태그를 가리키는 jQuery 객체 라고 가정합니다 ( 예 : 다음을 통해).
var $select = $('.selDiv .opts');
참고 1-값 일치에 val ()을 사용하십시오.
값 일치의 val()
경우 속성 선택기를 사용하는 것보다 사용이 훨씬 간단합니다. https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");
의 setter 버전은 동일한 속성을 설정하여 태그에 .val()
구현 되므로 모든 최신 브라우저에서 제대로 작동합니다.select
selected
option
value
참고 2-prop ( ‘selected’, true)를 사용하십시오.
옵션의 선택된 상태를 직접 설정 하려면 텍스트 값이 아닌 매개 변수 와 함께 prop
(not attr
)을 사용할 수 있습니다 .boolean
selected
예 : https://jsfiddle.net/yz7tu49b/
$option.prop('selected', true); // Will add selected="selected" to the tag
참고 3-알 수없는 값을 허용하십시오.
val()
을 선택하는 데 사용 <option>
하지만 val이 일치하지 않으면 (값의 소스에 따라 발생할 수 있음) “nothing”이 선택 $select.val()
되고을 반환 null
합니다.
따라서 표시된 예와 견고성을 위해 https://jsfiddle.net/1250Ldqn/ 과 같은 것을 사용할 수 있습니다 .
var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
$select.val("DEFAULT");
}
참고 4-정확한 텍스트 일치 :
정확한 텍스트로 일치 시키려면 filter
with 함수를 사용할 수 있습니다 . 예 : https://jsfiddle.net/yz7tu49b/2/ :
var $select = $('.selDiv .opts');
$select.children().filter(function(){
return this.text == "Selection 2";
}).prop('selected', true);
여분의 공백이있을 수 있지만 다음과 같이 수표에 트림을 추가 할 수 있습니다
return $.trim(this.text) == "some value to match";
주 5-색인으로 일치
인덱스별로 일치 시키려면 https://jsfiddle.net/yz7tu49b/3/ 와 같이 select의 자식을 인덱스 하십시오.
var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;
요즘 jQuery를 선호하는 직접 DOM 속성을 피하는 경향이 있지만 미래 보장 코드를 사용하면 https://jsfiddle.net/yz7tu49b/5/ :
var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);
주 6-새 선택을 시작하려면 change ()를 사용하십시오.
위의 모든 경우에 변경 이벤트가 발생하지 않습니다. 재귀 적 변경 이벤트가 발생하지 않도록 의도적으로 설계된 것입니다.
필요한 경우 변경 이벤트를 생성하려면 .change()
jQuery select
객체에 대한 호출을 추가하십시오 . 예를 들어 가장 간단한 예는 https://jsfiddle.net/yz7tu49b/7/ 이됩니다.
var $select = $('.selDiv .opts');
$select.val("SEL2").change();
속성 선택기를 사용하여 요소를 찾는 다른 방법도 많이 [value="SEL2"]
있지만, 다른 모든 옵션에 비해 속성 선택기가 비교적 느리다는 것을 기억해야합니다.
답변
선택의 이름을 지정하고 이것을 사용할 수 있습니다.
$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);
원하는 옵션을 선택해야합니다.
답변
$(elem).find('option[value="' + value + '"]').attr("selected", "selected");