[JQUERY] 어떻게 jQuery를에 SELECT 요소에 특정 옵션을 선택합니까?
JQUERY어떻게 jQuery를에 SELECT 요소에 특정 옵션을 선택합니까?
해결법
-
1.값이에 의해 셀렉터는 중간 옵션 요소를 얻을 수 있습니다
값이에 의해 셀렉터는 중간 옵션 요소를 얻을 수 있습니다
$('.selDiv option[value="SEL1"]')인덱스의 경우 :
$('.selDiv option:eq(1)')알려진 텍스트의 경우 :
$('.selDiv option:contains("Selection 1")')편집 : OP 위에 주석으로 드롭 다운의 선택 항목을 변경 한 후되었을 수 있습니다. 버전 1.6 및 높은 소품 () 메소드 권장합니다 :
$('.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 ()는 비교가 실패하게 개행 문자를 포함 할 수있다. 옵션이 암시 적으로 (더 태그) 폐쇄되지 않은 경우에 발생합니다 :
<select ...> <option value="1">Selection 1 <option value="2">Selection 2 : </select>당신은 단순히 e.text 사용하는 경우 후행 줄 바꿈과 같은 여분의 공백은 비교가 더 강력하게 제거됩니다.
-
2.제공되는 위의 방법 중에 내가 필요로하는 솔루션은 그래서 내가 나를 위해 일한 무엇을 제공 할 것입니다 생각하지 않습니다.
제공되는 위의 방법 중에 내가 필요로하는 솔루션은 그래서 내가 나를 위해 일한 무엇을 제공 할 것입니다 생각하지 않습니다.
$('#element option[value="no"]').attr("selected", "selected"); -
3.당신은 () 메소드를 발 사용할 수 있습니다 :
당신은 () 메소드를 발 사용할 수 있습니다 :
$('select').val('the_value'); -
4.값으로 어떤 jQuery를 1.7으로 나를 위해 일한 것은 코드 아래는,이 시도했다 :
값으로 어떤 jQuery를 1.7으로 나를 위해 일한 것은 코드 아래는,이 시도했다 :
$('#id option[value=theOptionValue]').prop('selected', 'selected').change(); -
5.이이 작업을 수행하는 방법에는 여러가지가 있지만, 가장 깨끗한 방법은 상단의 답변 발 이상 인자의 부하 () 사이에 손실되었습니다. 이 업데이트를 필요로하므로 또한 몇 가지 방법은, jQuery를 1.6로 변경되었습니다.
이이 작업을 수행하는 방법에는 여러가지가 있지만, 가장 깨끗한 방법은 상단의 답변 발 이상 인자의 부하 () 사이에 손실되었습니다. 이 업데이트를 필요로하므로 또한 몇 가지 방법은, jQuery를 1.6로 변경되었습니다.
다음의 예를 들어 내가 변수 $ 원하는 <선택> 태그, 예를 들어,에서의 jQuery 객체를 가리키는이 선택을 가정합니다 다음을 통해 :
var $select = $('.selDiv .opts');매칭 값, 발 ()을 사용하여 특성 선택기를 사용하는 것보다 훨씬 더 간단하다 : https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");.val의 세터 버전은 () 그래서 모든 현대적인 브라우저에서 잘 작동, 같은 값과 일치하는 옵션의 선택 속성을 설정하여 선택 태그에 구현된다.
직접 옵션의 선택 상태를 설정하려는 경우, 당신은 부울 매개 변수 (아닌 텍스트 값 선택)와 소품 (하지 ATTR)를 사용할 수 있습니다 :
EG HTTPS : //ysfiddle.net/izshttuchyab/
$option.prop('selected', true); // Will add selected="selected" to the tag당신이 발을 사용하는 경우 () (값의 소스에 따라 일어날 수)는 <옵션>을 선택하지만, 발 일치되어 있지 않은 경우, "아무것도"가 선택되지 않고 $ select.val는 ()는 null를 돌려줍니다.
그래서, 예를 들어 표시 및 견고성을 위해, 당신은이 https://jsfiddle.net/1250Ldqn/ 같은 것을 사용할 수 있습니다 :
var $select = $('.selDiv .opts'); $select.val("SEL2"); if ($select.val() == null) { $select.val("DEFAULT"); }당신이 정확한 텍스트가 일치 할 경우, 기능 필터를 사용할 수 있습니다. 예를 들면 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;나는 또한 https://jsfiddle.net/yz7tu49b/5/으로 수행 될 수 있도록 미래 지향적 코드, 요즘 jQuery를 찬성 직접 DOM 속성을 회피하는 경향이 있지만 :
var $select = $('.selDiv .opts'); var index = 2; $select.children().eq(index).prop('selected', true);위의 모든 경우에 변경 이벤트가 발생하지 않습니다. 당신이 재귀 변경 이벤트와 함께 바람하지 않도록 이것은 의도적으로 설계된 동작입니다.
변경 이벤트를 생성하려면, 필요한 경우, 단지 jQuery를 선택 객체에 .change ()에 대한 호출을 추가합니다. 예를 들면 최초 간단한 예 https://jsfiddle.net/yz7tu49b/7/진다
var $select = $('.selDiv .opts'); $select.val("SEL2").change();이 많음 [값 = "SEL2"]와 같은 속성 선택기를 사용하여 요소를 찾을 수있는 다른 방법도 있습니다,하지만 당신은 상대적으로 느린 이러한 다른 옵션 모두에 비교 속성 선택자을 기억해야합니다.
-
6.당신은 선택의 이름을 지정하고이를 사용할 수 있습니다 :
당신은 선택의 이름을 지정하고이를 사용할 수 있습니다 :
$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);그것은 당신이 원하는 옵션을 선택해야합니다.
-
7.
$(elem).find('option[value="' + value + '"]').attr("selected", "selected"); -
8.문서에 대한 내 자신의 질문에 대답. 나는이 작업을 수행 할 수있는 다른 방법이 있는지 해요,하지만이 작품이 코드를 테스트합니다.
문서에 대한 내 자신의 질문에 대답. 나는이 작업을 수행 할 수있는 다른 방법이 있는지 해요,하지만이 작품이 코드를 테스트합니다.
<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> -
9.
<script> $(document).ready(function() { $("#id").val('select value here'); }); </script><script> $(document).ready(function() { $("#id").val('select value here').trigger('change'); }); </script> -
10.JQuery와-2.1.4을 사용하여, 나는 나를 위해 일을 다음과 같이 답을 찾을 수 :
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
-
11.선택된 트리거링 선택 값 설정 :
선택된 트리거링 선택 값 설정 :
$('select.opts').val('SEL1').change();범위에서 옵션을 설정하는 경우 :
$('.selDiv option[value="SEL1"]') .attr('selected', 'selected') .change();이 코드를 사용 선택은 ATTR하여 선택한 속성을 변경, ()를 조건 개체 선택을 찾을 수 있습니다.
또한, 나는 사용자가 선택의 변화에 종료됩니다,이 코드를 수행하여, 선택에 속성을 설정 한 후 변화 () 이벤트를 추가하는 것이 좋습니다.
-
12.내가 목록의 인덱스를 알고 나는이를 사용합니다.
내가 목록의 인덱스를 알고 나는이를 사용합니다.
$("#yourlist :nth(1)").prop("selected","selected").change();이 변화에 대한 목록을 허용하고 변경 이벤트를 발생. 은 ": 제 n (n)은"인덱스 0 내지 세고
-
13.방금 대신 #ID의 선택 필드 ID를 사용 (예. # select_name)
방금 대신 #ID의 선택 필드 ID를 사용 (예. # select_name)
대신 옵션 값의 당신의 선택 옵션 값을 사용
-
14.내가 갈거야 -
내가 갈거야 -
$("select#my-select option") .each(function() { this.selected = (this.text == myVal); }); -
15.업데이트-선택 옵션 기능과 필요에 속성을 보내는 경우 jQuery를 들어 선택
업데이트-선택 옵션 기능과 필요에 속성을 보내는 경우 jQuery를 들어 선택
$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected'); $('#editLocationCity').chosen().change(); $('#editLocationCity').trigger('liszt:updated'); -
16.
/* This will reset your select box with "-- Please Select --" */ <script> $(document).ready(function() { $("#gate option[value='']").prop('selected', true); }); </script> -
17.$ ( '선택') 발 ( 'the_value.'); 올바른 솔루션을 보이는 그런 다음 데이터 테이블 행이있는 경우 :
$ ( '선택') 발 ( 'the_value.'); 올바른 솔루션을 보이는 그런 다음 데이터 테이블 행이있는 경우 :
$row.find('#component').val('All'); -
18.당신이 jQuery를 사용하지하려는 경우, 당신은 코드 아래 사용할 수 있습니다 :
당신이 jQuery를 사용하지하려는 경우, 당신은 코드 아래 사용할 수 있습니다 :
document.getElementById("mySelect").selectedIndex = "2"; -
19.질문 주셔서 감사합니다. 이 코드 조각이 당신을 위해 작동합니다 바랍니다.
질문 주셔서 감사합니다. 이 코드 조각이 당신을 위해 작동합니다 바랍니다.
var val = $("select.opts:visible option:selected ").val(); -
20.
$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");또는
$('#select option[value="myValue"]').prop("selected",true).trigger("change"); -
21.당신이 ATTR 대신 소품 사용해야하는 이유 몇 가지 제안이 있습니다. 확실히 내가 모두 테스트 한 같은 소품을 사용하고 ATTR 당신에게 사건의 간단한을 제외하고 이상한 결과를 줄 것이다.
당신이 ATTR 대신 소품 사용해야하는 이유 몇 가지 제안이 있습니다. 확실히 내가 모두 테스트 한 같은 소품을 사용하고 ATTR 당신에게 사건의 간단한을 제외하고 이상한 결과를 줄 것이다.
나는 임의의 그룹화를 선택 옵션에서 선택이 자동으로 같은 페이지에 다른 선택 입력을 선택하는 솔루션을 원했다. 그래서 예를 들어, 당신이 드롭 다운이있는 경우 - 국가 하나, 대륙의 다른. 어떤 국가를 선택하면이 시나리오에서는 자동으로 다른 대륙 드롭 다운 메뉴에서 해당 국가의 대륙을 선택했습니다.
$ ( "# 국가"). ( "변화", 기능에 대한 () { // 대륙을 얻을 VAR. originLocationRegion = $ (이 께) .find ( "선택") 데이터 ( "기점 영역"); // 소품 제대로 대륙을 선택 $ ( '# 대륙 옵션 [VALUE =' '+ originLocationRegion +' ']) 소품 ('선택 '에 해당).; }); $ ( "#의 COUNTRY2"). ( "변화", 기능에 대한 () { // 대륙을 얻을 VAR. originLocationRegion = $ (이 께) .find ( "선택") 데이터 ( "기점 영역"); // ATTR로 잘못 대륙을 선택 $ ( '#의 continent2 옵션 [VALUE =' '+ originLocationRegion +' ']) ATTR ('선택 '에 해당).; }); <링크 HREF = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"REL = "스타일"/> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">