Programming

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

procodes 2020. 6. 2. 21:48
반응형

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


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

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

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


우선-그 선택기는 꽤 느립니다. 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);

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

이것은 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);


나는 사용하고있다

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

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


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

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

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

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>

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

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

두 번째 옵션을 선택하려면

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

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

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

$("[id$='" + originalId + "']").val("0 index value");

0으로 설정합니다


네 번째 옵션 선택

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

jsfiddle의 예

참고URL : https://stackoverflow.com/questions/1314245/set-the-selected-index-of-a-dropdown-using-jquery

반응형