[jquery] jQuery의 SELECT 요소에서 특정 옵션을 어떻게 선택합니까?

이 작업을 수행하는 방법에는 여러 가지가 있지만에 대한 가장 많은 답변과 논쟁 중 가장 깨끗한 접근 방식이 사라졌습니다 val(). 또한 일부 메소드는 jQuery 1.6에서 변경되었으므로 업데이트가 필요합니다.

다음 예제에서는 변수 $select가 원하는 <select>태그를 가리키는 jQuery 객체 라고 가정합니다 ( 예 : 다음을 통해).

var $select = $('.selDiv .opts');

참고 1-값 일치에 val ()을 사용하십시오.

값 일치의 val()경우 속성 선택기를 사용하는 것보다 사용이 훨씬 간단합니다. https://jsfiddle.net/yz7tu49b/6/

$select.val("SEL2");

의 setter 버전은 동일한 속성을 설정하여 태그에 .val()구현 되므로 모든 최신 브라우저에서 제대로 작동합니다.selectselectedoptionvalue

참고 2-prop ( ‘selected’, true)를 사용하십시오.

옵션의 선택된 상태를 직접 설정 하려면 텍스트 값이 아닌 매개 변수 와 함께 prop(not attr)을 사용할 수 있습니다 .booleanselected

예 : 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-정확한 텍스트 일치 :

정확한 텍스트로 일치 시키려면 filterwith 함수를 사용할 수 있습니다 . 예 : 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");