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는 드롭다운의 선택된 항목을 변경한 후일 수 있습니다.버전 1.6 이상에서는 prop() 방법이 권장됩니다.
$('.selDiv option:eq(1)').prop('selected', true)
이전 버전의 경우:
$('.selDiv option:eq(1)').attr('selected', 'selected')
EDIT2: 라이언의 발언 이후.선택 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
원하는 위치를 가리키는 jQuery 개체입니다.<select>
태그(예: 다음을 통해):
var $select = $('.selDiv .opts');
참고 1 - 값 일치에 val() 사용:
값 일치의 경우 사용val()
속성 선택기를 사용하는 것보다 훨씬 간단합니다. https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");
의 세터 버전.val()
에 구현됨select
태그를 설정하여selected
일치하는 성질option
마찬가지로value
그래서 모든 최신 브라우저에서 잘 작동합니다.
참고 2 - 소품 사용('선택됨', true)
옵션의 선택된 상태를 직접 설정하려면 다음을 사용할 수 있습니다.prop
(아닙니다.attr
)와 함께boolean
매개 변수(텍스트 값이 아닌)selected
):
예: https://jsfiddle.net/yz7tu49b/
$option.prop('selected', true); // Will add selected="selected" to the tag
참고 3 - 알 수 없는 값을 허용합니다.
사용하는 경우val()
선택하기 위해<option>
그러나 값이 일치하지 않습니다(값의 소스에 따라 발생하는 경우가 있습니다). 그러면 "아무것도"가 선택되고$select.val()
돌아올 것입니다null
.
따라서 다음과 같은 https://jsfiddle.net/1250Ldqn/ 을 사용하여 견고성을 확보할 수 있습니다.
var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
$select.val("DEFAULT");
}
참고 4 - 정확한 텍스트 일치:
시키려면 정한텍로일려다사수있다습니용할음을면치키시를 하면 됩니다.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";
참고 5 - 색인별 일치
색인으로 일치시키려면 선택한 하위 항목을 색인화하십시오(예: 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);
참고 6 - 변경()을 사용하여 새 선택 항목을 실행합니다.
위의 모든 경우 변경 이벤트가 실행되지 않습니다.이는 반복적인 변경 이벤트가 발생하지 않도록 설계된 것입니다.
변경 이벤트를 생성하려면 필요한 경우 다음에 호출을 추가합니다..change()
jQuery »select
오브젝트(예: 가장 간단한 예는 https://jsfiddle.net/yz7tu49b/7/ 가 됩니다.
var $select = $('.selDiv .opts');
$select.val("SEL2").change();
또한 속성 선택기를 사용하여 요소를 찾는 많은 다른 방법들이 있습니다.[value="SEL2"]
그러나 속성 선택기는 다른 모든 옵션에 비해 상대적으로 느립니다.
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 에서 찾았습니다.
정확히 작동할 것입니다. 아래 방법을 사용해 보십시오.
일반적인 경우 옵션 선택
<script>
$(document).ready(function() {
$("#id").val('select value here');
});
</script>
선택 2 옵션의 경우 트리거 옵션을 사용해야 합니다.
<script>
$(document).ready(function() {
$("#id").val('select value here').trigger('change');
});
</script>
$(elem).find('option[value="' + value + '"]').attr("selected", "selected");
선택 항목의 이름을 지정하고 다음을 사용할 수 있습니다.
$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);
원하는 옵션을 선택해야 합니다.
문서 작성을 위해 제 질문에 답하는 중입니다.다른 방법도 있겠지만, 이 방법은 작동하고 이 코드는 테스트됩니다.
<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>
트리거링을 선택한 상태에서 값을 선택합니다.
$('select.opts').val('SEL1').change();
스코프에서 옵션을 설정하는 경우:
$('.selDiv option[value="SEL1"]')
.attr('selected', 'selected')
.change();
condition을 합니다.attr()
.
또한추가것추다니천합을는하다니▁add추▁fut합▁recommend천▁to▁i를 추가하는 것을 추천합니다.change()
을 성설 후이벤으로 한 후 selected
이렇게 하면 코드가 사용자별 선택을 변경할 수 있습니다.
$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");
// or
$('#select option[value="myValue"]').prop("selected",true).trigger("change");
사용해 보세요.
#id(즉, #id) 대신 select field id(필드 ID 선택)를 사용합니다.#select_name)
옵션 값 대신 선택 옵션 값 사용
<script>
$(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
});
</script>
저는 목록의 색인을 알고 있을 때 이것을 사용합니다.
$("#yourlist :nth(1)").prop("selected","selected").change();
이를 통해 목록을 변경하고 변경 이벤트를 실행할 수 있습니다.":nth(n)"가 인덱스 0에서 카운트됩니다.
제가 할게요:-
$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });
/* 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');
jQuery를 사용하지 않으려면 아래 코드를 사용할 수 있습니다.
document.getElementById("mySelect").selectedIndex = "2";
그$('select').val('the_value');
에서는 올바른 솔루션을 찾고 데이터 테이블 행이 있는 경우 다음을 수행합니다.
$row.find('#component').val('All');
질문 감사합니다.이 코드가 당신에게 효과가 있기를 바랍니다.
var val = $("select.opts:visible option:selected ").val();
사용해야 하는 몇 가지 제안이 있습니다.prop
에 attr.
꼭사하요를 하세요.prop
그리고 내가 둘 다 테스트했듯이.attr
가장 간단한 경우를 제외하고는 이상한 결과를 얻을 수 있습니다.
임의로 그룹화된 솔루션 중에서 선택할 수 있는 솔루션이 필요했습니다.select
으로 다른 옵션을 했습니다.select
같은 페이지에 입력합니다.예를 들어, 두 개의 드롭다운이 있다고 가정하면 하나는 국가를 위한 드롭다운이고 다른 하나는 대륙을 위한 드롭다운입니다.이 시나리오에서 국가를 선택하면 자동으로 다른 대륙의 드롭다운 목록에서 해당 국가의 대륙이 선택됩니다.
$("#country").on("change", function() {
//get continent
var originLocationRegion = $(this).find(":selected").data("origin-region");
//select continent correctly with prop
$('#continent option[value="' + originLocationRegion + '"]').prop('selected', true);
});
$("#country2").on("change", function() {
//get continent
var originLocationRegion = $(this).find(":selected").data("origin-region");
//select continent wrongly with attr
$('#continent2 option[value="' + originLocationRegion + '"]').attr('selected', true);
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form>
<h4 class="text-success">Props to the good stuff ;) </h4>
<div class="form-row">
<div class="form-group col-md-6 col-sm-6">
<label>Conuntries</label>
<select class="custom-select country" id="country">
<option disabled selected>Select Country </option>
<option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
<option data-origin-region="Antartica" value="Antartica">Antartica</option>
<option data-origin-region="Australia" value="Australia">Australia</option>
<option data-origin-region="Europe" value="Austria">Austria</option>
<option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
<option data-origin-region="South America" value="Brazil">Brazil</option>
<option data-origin-region="Africa" value="Cameroon">Cameroon</option>
<option data-origin-region="North America" value="Canada">Canada</option>
<option data-origin-region="South America" value="Chile">Chile</option>
<option data-origin-region="Asia" value="China">China</option>
<option data-origin-region="South America" value="Ecuador">Ecuador</option>
<option data-origin-region="Australia" value="Fiji">Fiji</option>
<option data-origin-region="North America" value="Mexico">Mexico</option>
<option data-origin-region="Australia" value="New Zealand">New Zealand</option>
<option data-origin-region="Africa" value="Nigeria">Nigeria</option>
<option data-origin-region="Europe" value="Portugal">Portugal</option>
<option data-origin-region="Africa" value="Seychelles">Seychelles</option>
<option data-origin-region="North America" value="United States">United States</option>
<option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
</select>
</div>
<div class="form-group col-md-6 col-sm-6">
<label>Continent</label>
<select class="custom-select" id="continent">
<option disabled selected>Select Continent</option>
<option disabled value="Africa">Africa</option>
<option disabled value="Antartica">Antartica</option>
<option disabled value="Asia">Asia</option>
<option disabled value="Europe">Europe</option>
<option disabled value="North America">North America</option>
<option disabled value="Australia">Australia</option>
<option disabled value="South America">South America</option>
</select>
</div>
</div>
</form>
<hr>
<form>
<h4 class="text-danger"> Attributing the bad stuff to attr </h4>
<div class="form-row">
<div class="form-group col-md-6 col-sm-6">
<label>Conuntries</label>
<select class="custom-select country-2" id="country2">
<option disabled selected>Select Country </option>
<option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
<option data-origin-region="Antartica" value="Antartica">Antartica</option>
<option data-origin-region="Australia" value="Australia">Australia</option>
<option data-origin-region="Europe" value="Austria">Austria</option>
<option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
<option data-origin-region="South America" value="Brazil">Brazil</option>
<option data-origin-region="Africa" value="Cameroon">Cameroon</option>
<option data-origin-region="North America" value="Canada">Canada</option>
<option data-origin-region="South America" value="Chile">Chile</option>
<option data-origin-region="Asia" value="China">China</option>
<option data-origin-region="South America" value="Ecuador">Ecuador</option>
<option data-origin-region="Australia" value="Fiji">Fiji</option>
<option data-origin-region="North America" value="Mexico">Mexico</option>
<option data-origin-region="Australia" value="New Zealand">New Zealand</option>
<option data-origin-region="Africa" value="Nigeria">Nigeria</option>
<option data-origin-region="Europe" value="Portugal">Portugal</option>
<option data-origin-region="Africa" value="Seychelles">Seychelles</option>
<option data-origin-region="North America" value="United States">United States</option>
<option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
</select>
</div>
<div class="form-group col-md-6 col-sm-6">
<label>Continent</label>
<select class="custom-select" id="continent2">
<option disabled selected>Select Continent</option>
<option disabled value="Africa">Africa</option>
<option disabled value="Antartica">Antartica</option>
<option disabled value="Asia">Asia</option>
<option disabled value="Europe">Europe</option>
<option disabled value="North America">North America</option>
<option disabled value="Australia">Australia</option>
<option disabled value="South America">South America</option>
</select>
</div>
</div>
</form>
</div>
에서 볼 수 , 코드스니볼수있이듯서,prop
매번 올바르게 작동하지만attr
옵션을 한 번 선택한 후에는 제대로 선택할 수 없습니다.
키포인트:우리는 보통 속성에 관심이 있기 때문에 더 안전하게 사용할 수 있습니다.prop
1파운드가 attr
대개의 경우에
언급URL : https://stackoverflow.com/questions/314636/how-do-you-select-a-particular-option-in-a-select-element-in-jquery
'source' 카테고리의 다른 글
작동하지 않는 경우 Windows 배치 SET 내부 (0) | 2023.05.22 |
---|---|
문자열 작성기에서 문자 제거 (0) | 2023.05.22 |
Reactjs에서 Excel 파일을 읽는 중 (0) | 2023.05.22 |
Git이 "블록체인"으로 간주되지 않는 이유는 무엇입니까? (0) | 2023.05.22 |
왜 '없음'을 선택합니까?__eq__("a")'가 참으로 평가되는 것 같습니까(그러나 완전히는 아닙니다)? (0) | 2023.05.22 |