jQuery를 사용하여 드롭 다운의 선택된 인덱스 설정


165

컨트롤을 찾는 방법이 다음과 같은 경우 jQuery에서 드롭 다운 인덱스를 설정하는 방법은 무엇입니까?

$("*[id$='" + originalId + "']") 

컨트롤을 동적으로 만들고 Web Forms를 사용할 때 ID가 변경 되었으므로이 방법 으로이 작업을 수행하여 일부 컨트롤을 찾을 수 있습니다. 그러나 jQuery 객체가 있으면 선택한 인덱스를 0으로 설정하는 방법을 모릅니다.

답변:


352

우선-그 선택기는 꽤 느립니다. ID를 찾는 모든 DOM 요소를 스캔합니다. 요소에 클래스를 할당 할 수 있으면 성능 저하가 적습니다.

$(".myselect")

질문에 대답하기 위해 jQuery에서 선택 요소 값을 변경하는 몇 가지 방법이 있습니다.

// sets selected index of a select box to the option with the value "0"
$("select#elem").val('0'); 

// sets selected index of a select box to the option with the value ""
$("select#elem").val(''); 

// sets selected index to first item using the DOM
$("select#elem")[0].selectedIndex = 0;

// sets selected index to first item using jQuery (can work on multiple elements)
$("select#elem").prop('selectedIndex', 0);

더 좋은 방법이 있습니까? ID와 일치하는 전체 DOM을 스캔한다고 생각했지만 jQuery를 처음 사용했기 때문에 작동하도록 한 다음 더 나은 방법이 있는지 알아 보겠습니다. 조언을 부탁드립니다.
온스.

예-찾아야하는 요소에 클래스를 할당 할 수 있으면 훨씬 빠른 선택기입니다.
gnarf

@gnarf는 ID가 빠르지 않습니까?
KBN

#an-id빠르지 만 *[id$=ends-with]입니다 방법 느린은 "요소에 클래스를 할당"어떻게 그게 전부는 의미입니다
gnarf

선택한 인덱스 값이 다른 ASP.net DropDownList가 여러 개인 경우 어떻게됩니까?
SearchForKnowledge

106

방금 이것을 발견하면 저에게 효과적이며 개인적으로 읽기가 더 쉽습니다.

이것은 gnarf의 답변 번호 3 옵션과 같이 실제 색인을 설정합니다.

// sets selected index of a select box the actual index of 0 
$("select#elem").attr('selectedIndex', 0);

이것은 작동하지 않았지만 지금은 ... 버그를 참조하십시오 : http://dev.jquery.com/ticket/1474

추가

의견에서 권장하는대로 다음을 사용하십시오.

$("select#elem").prop('selectedIndex', 0);


30
그리고 jQuery 1.6 .prop('selectedIndex', 0);.attr()
부터는

1
사실 1.7에서는 작동하지 않을 수 있습니다. 수락 된 답변 참조 : stackoverflow.com/questions/8010664/…
4imble

부록에 +1. 이 문제로 인해 이전 코드가 손상되었습니다.
BiLaL

11

2015 년 에이 답변을 작성 중이며 어떤 이유로 (아마도 이전 버전의 jQuery) 다른 답변은 저에게 도움이되지 않았습니다. 그들은 선택한 인덱스를 변경하지만 실제로 실제 드롭 다운을 반영하지는 않습니다.

색인을 변경하고 드롭 다운에 반영하는 다른 방법은 다음과 같습니다.

$('#mydropdown').val('first').change();

1
답변 주셔서 감사합니다. 이 답변 만이 저에게 도움이됩니다
Viraj Dhamal

또한 2015 년 prop('selectedIndex', ...);에는 선택을 변경하는 데 아무런 문제가 없습니다 (Chrome 및 Firefox에서 테스트 됨).
Lambart

2
무엇의 가치를 들어, 여기에 다른 일을하는지 트리거되는 것을 지적해야한다 change드롭 다운,도 호출하여 선택을 변경하는 사람들을위한 유용한 수정 / 해결 방법이 될 수에 이벤트 prop('selectedIndex', ...)보다는를 val(...). 아마도 문제는 당신이 change이벤트를 듣고 있다는 것이고, 그것이 당신 에게 효과가 없었던 것입니까? property 를 바꾸는 것만으로 도 어떤 사건도 발생하지 않을 것입니다 ...
Lambart

9

나는 사용하고있다

$('#elem').val('xyz');

value = 'xyz'인 옵션 요소를 선택하려면


9

JQuery 코드 :

$("#sel_status").prop('selectedIndex',1);

JSP 코드 :

Status:
<select name="sel_status"
    id="sel_status">
    <option value="1">-Status-</option>
    <option>ALL</option>
    <option>SENT</option>
    <option>RECEIVED</option>
    <option>DEACTIVE</option>
</select>

3

select 요소에서 첫 번째 옵션의 값을 가져옵니다.

$("*[id$='" + originalId + "']").val($("*[id$='" + originalId + "'] option:first").attr('value'));

3

두 번째 옵션을 선택하려면

$('#your-select-box-id :nth-child(2)').prop('selected', true);

여기서 우리는 이벤트를 발생시키기 위해`trigger ( 'change')를 추가합니다.

$('#your-select-box-id :nth-child(2)').prop('selected', true).trigger('change');

이것은 훨씬 더 나은 대답입니다.
벤 Dehghan


1

네 번째 옵션 선택

$('#select').val($('#select option').eq(3).val());

jsfiddle의 예


2
코드 난독 화 콘테스트에 유효한 솔루션입니다! :)
Lambart
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.