당신이 색인, 가치 또는 원본을 알고있는 경우에. 직접 참조를위한 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>
value에 의해 중간 option-element를 가져 오는 selector는 다음과 같습니다.
$('.selDiv option[value="SEL1"]')
색인의 경우 :
$('.selDiv option:eq(1)')
알려진 텍스트 :
$('.selDiv option:contains("Selection 1")')
편집하다: 위에서 언급 한 것처럼 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()비교를 실패하게하는 개행을 포함 할 수 있기 때문입니다. 옵션이 암시 적으로 닫히면 발생합니다 (no</option>꼬리표):
<select ...>
<option value="1">Selection 1
<option value="2'>Selection 2
:
단순히 사용한다면e.text후행 줄 바꿈과 같은 여분의 공백이 제거되어 비교가 더욱 강력 해집니다.
위의 방법 중 어느 것도 내가 필요한 해결책을 제공하지 않았기 때문에 나를 위해 일한 것을 제공 할 것이라고 생각했습니다.
$('#element option[value="no"]').attr("selected", "selected");
prop하지attr. - Gone Coding.attr맞다. "선택됨" < option >의 속성입니다.w3.org/TR/html5/forms.html#attr-option-selected - Carlos Llongoprop~에 우선attr. 따라서 w3.org의 각 속성을 조회해야만 속성인지 또는지지 액션으로 구현되었는지 확인할 수 있습니다. - Gone Coding
너는 단지 사용할 수있다.val()방법:
$('select').val('the_value');
the_value. .val은 선택자 / 필터 함수가 아닙니다! 속성 접근 자이며 해당 문자열에 SETS 값을 전달합니다. 나는 내 upvote를 되찾기 위해 노력했다. 그러나 나는 테스트에서 이것을 reallized 한 후에 너무 늦었다. - AaronLS
가치로는 나를 위해 무엇이 효과가 있었습니까?jQuery 1.7아래 코드는 시도해보십시오.
$('#id option[value=theOptionValue]').prop('selected', 'selected').change();
.change()필요했다. SELECT를 기반으로 미리보기 이미지를 전환하는 예제가 있습니다. 맞춤 테마를 업로드 할 때 " 맞춤 테마 " 옵션 목록에서. 그만큼.prop()전화가 걸렸지 만.change()내 선택의 오른쪽에있는 미리보기 이미지가 업데이트되지 않았습니다. - Volomikeprop값은 동일한 출력을 생성합니다. 예 :.prop('selected', true) - Gone Coding
선택의 이름을 정하고 이것을 사용할 수 있습니다 :
$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);
원하는 옵션을 선택해야합니다.
이를 수행하는 데는 여러 가지 방법이 있지만 최상위 답변과 많은 논쟁 중에서 가장 깨끗한 접근법이 사라졌습니다.val(). 또한 일부 메소드는 jQuery 1.6에서 변경되었으므로 업데이트가 필요합니다.
다음 예제에서 변수를 가정합니다.$select원하는 것을 가리키는 jQuery 객체이다.<select>태그 (예 : 다음을 통해
var $select = $('.selDiv .opts');
가치 매칭을 위해val()속성 선택자를 사용하는 것보다 훨씬 간단합니다.https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");
setter 버전의.val()에 구현 됨select태그를 설정하여selected일치의 속성option같은value, 그래서 모든 현대적인 브라우저에서 잘 작동합니다.
옵션의 선택된 상태를 직접 설정하려면 다음을 사용할 수 있습니다.prop(아니attr)와boolean매개 변수 (텍스트 값이 아닌)selected) :
을 포함한다.https://jsfiddle.net/yz7tu49b/
$option.prop('selected', true); // Will add selected="selected" to the tag
사용하는 경우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");
}
정확한 텍스트로 일치 시키려면filter기능. 예 :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/
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()jQueryselect목적. 예 : 아주 간단한 예가된다.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
나는 목록의 색인을 알 때 이것을 사용합니다.
$("#yourlist :nth(1)").prop("selected","selected").change();
이렇게하면 목록이 변경되고 변경 이벤트가 시작됩니다. ": nth (n)"은 인덱스 0에서부터 계산됩니다.
나는 같이 갈거야 : -
$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });
선택된 트리거로 선택 값을 설정하려면 :
$('select.opts').val('SEL1').change();
범위에서 옵션을 설정하는 경우 :
$('.selDiv option[value="SEL1"]')
.attr('selected', 'selected')
.change();
이 코드는 선택기를 사용하여 조건이있는 선택 객체를 찾은 다음 선택한 속성을에 따라 변경합니다.attr().
추가하려면 다음을 추가하는 것이 좋습니다.change()속성을 설정 한 후 이벤트selected이렇게하면 코드가 사용자 선택에 따라 변경됩니다.
#id 대신 select field id를 사용합니다 (예 : #select_name).
대신에옵션 값선택 옵션을 사용하십시오.값
<script>
$(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
});
</script>
/* This will reset your select box with "-- Please Select --" */
<script>
$(document).ready(function() {
$("#gate option[value='']").prop('selected', true);
});
</script>
기능에 속성을 보내고 업데이트 선택 옵션이 필요한 경우 Jquery가 선택됩니다.
$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');
정확히 작동합니다.
<script>
$(document).ready(function() {
$("#id").val('select value here');
});
</script>
그만큼$('select').val('the_value');올바른 솔루션을 찾고 데이터 테이블 행이있는 경우 :
$row.find('#component').val('All');
jQuery를 사용하지 않으려면 다음 코드를 사용할 수 있습니다.
document.getElementById("mySelect").selectedIndex = "2";
질문 주셔서 감사합니다. 희망이 코드 조각이 당신을 위해 작동합니다.
var val = $("select.opts:visible option:selected ").val();
$("#my_select").val("the_new_value").change();... ...에서그래서 - dsdsdsdsd