답변:
중간 옵션 요소를 값으로 가져 오는 선택기는 다음과 같습니다.
$('.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");prop하지 않아야 attr합니다.
.attr이 정확합니다. "selected"는 <option> w3.org/TR/html5/forms.html#attr-option-selected
prop을 선호합니다 attr. 이는 속성인지 또는 백업 작업으로 구현되었는지 확인하기 위해 w3.org에서 각각의 모든 속성을 조회 할 필요가 없습니다.
val()방법을 사용할 수 있습니다 .
$('select').val('the_value');the_value입니다. .val은 선택기 / 필터 기능이 아닙니다! 속성 접근 자이며 문자열을 값으로 전달합니다. 나는 upvote를 되 찾으려고했지만 시험에서 이것을 깨닫고 나서 너무 늦었다.
값으로, jQuery 1.7 에서 나를 위해 일한 것은 아래 코드였습니다.
$('#id option[value=theOptionValue]').prop('selected', 'selected').change();.change()필요했다. SELECT를 기반으로 축소판을 전환하는 예가있었습니다. 맞춤 테마를 업로드 할 때 옵션 목록에서 "맞춤 테마"를 선택해야했습니다. .prop()호출했다,하지만하지 않고 .change(), 내 선택의 오른쪽에 썸네일 이미지가 업데이트되지 않습니다.
prop값은 동일한 출력을 생성합니다. 예.prop('selected', true)
이 작업을 수행하는 방법에는 여러 가지가 있지만에 대한 가장 많은 답변과 논쟁 중 가장 깨끗한 접근 방식이 사라졌습니다 val(). 또한 일부 메소드는 jQuery 1.6에서 변경되었으므로 업데이트가 필요합니다.
다음 예제에서는 변수 $select가 원하는 <select>태그를 가리키는 jQuery 객체 라고 가정합니다 ( 예 : 다음을 통해).
var $select = $('.selDiv .opts');값 일치의 val()경우 속성 선택기를 사용하는 것보다 사용이 훨씬 간단합니다. https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");의 setter 버전은 동일한 속성을 설정하여 태그에 .val()구현 되므로 모든 최신 브라우저에서 제대로 작동합니다.selectselectedoptionvalue
옵션의 선택된 상태를 직접 설정 하려면 텍스트 값이 아닌 매개 변수 와 함께 prop(not attr)을 사용할 수 있습니다 .booleanselected
예 : https://jsfiddle.net/yz7tu49b/
$option.prop('selected', true); // Will add selected="selected" to the tagval()을 선택하는 데 사용 <option>하지만 val이 일치하지 않으면 (값의 소스에 따라 발생할 수 있음) "nothing"이 선택 $select.val()되고을 반환 null합니다.
따라서 표시된 예와 견고성을 위해 https://jsfiddle.net/1250Ldqn/ 과 같은 것을 사용할 수 있습니다 .
var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
$select.val("DEFAULT");
}정확한 텍스트로 일치 시키려면 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";인덱스별로 일치 시키려면 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);위의 모든 경우에 변경 이벤트가 발생하지 않습니다. 재귀 적 변경 이벤트가 발생하지 않도록 의도적으로 설계된 것입니다.
필요한 경우 변경 이벤트를 생성하려면 .change()jQuery select객체에 대한 호출을 추가하십시오 . 예를 들어 가장 간단한 예는 https://jsfiddle.net/yz7tu49b/7/ 이됩니다.
var $select = $('.selDiv .opts');
$select.val("SEL2").change();속성 선택기를 사용하여 요소를 찾는 다른 방법도 많이 [value="SEL2"]있지만, 다른 모든 옵션에 비해 속성 선택기가 비교적 느리다는 것을 기억해야합니다.
$(elem).find('option[value="' + value + '"]').attr("selected", "selected");문서에 대한 내 자신의 질문에 대답. 나는 이것을 달성 할 수있는 다른 방법이 있다고 확신하지만 이것이 작동 하고이 코드가 테스트됩니다.
<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">
$(function() {
$(".update").bind("click", // bind the click event to a div
function() {
var selectOption = $('.selDiv').children('.opts') ;
var _this = $(this).next().children(".opts") ;
$(selectOption).find("option[index='0']").attr("selected","selected");
// $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
// $(selectOption).find("option[text='Default']").attr("selected","selected");
// $(_this).find("option[value='DEFAULT']").attr("selected","selected");
// $(_this).find("option[text='Default']").attr("selected","selected");
// $(_this).find("option[index='0']").attr("selected","selected");
}); // END Bind
}); // End eventlistener
</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<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>
</body>
</html>jquery-2.1.4 사용 하면 다음과 같은 대답이 나에게 효과적이라는 것을 알았습니다.
$('#MySelectionBox').val(123).change();문자열 값이 있으면 다음을 시도하십시오.
$('#MySelectionBox').val("extra thing").change();다른 예제는 저에게 효과적이지 않으므로이 답변을 추가하는 이유입니다.
https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu 에서 원래 답변을 찾았습니다.
트리거링이 선택된 상태에서 선택 값을 설정하려면 :
$('select.opts').val('SEL1').change();범위에서 옵션을 설정하려면 다음을 수행하십시오.
$('.selDiv option[value="SEL1"]')
.attr('selected', 'selected')
.change();이 코드는 selector를 사용하여 조건이있는 select 객체를 찾은 다음로 선택한 속성을 변경합니다 attr().
또한 change()속성을로 설정 한 후 이벤트 를 추가하는 것이 좋습니다. selected이 작업을 수행하면 코드가 사용자 선택을 변경하는 것에 가깝습니다.
나는 함께 갈 것이다 :-
$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });는 $('select').val('the_value');올바른 솔루션을 보이는 그런 다음 데이터 테이블 행이있는 경우 :
$row.find('#component').val('All');
$("#my_select").val("the_new_value").change();... ... 그래서