jquery를 사용하여 드롭 다운에서 첫 번째 요소를 선택하는 방법은 무엇입니까?


106

jquery를 사용하여 내 페이지의 모든 선택 태그에서 첫 번째 옵션을 선택하는 방법을 알고 싶습니다.

이것을 시도 :

$('select option:nth(0)').attr("selected", "selected"); 

하지만 작동하지 않았다

답변:


193

이것을 시도하십시오 ...

$('select option:first-child').attr("selected", "selected");

또 다른 옵션은 이것이지만 아래에 코딩 된대로 한 번에 하나의 드롭 다운 목록에서만 작동합니다.

var myDDL = $('myID');
myDDL[0].selectedIndex = 0;

가치를 기반으로 설정하는 방법에 대한이 게시물을 살펴보십시오. 흥미롭지 만이 특정 문제에 대해서는 도움이되지 않습니다.

jQuery를 사용하여 드롭 다운 목록의 선택한 값 변경


단지 내가 모든 선택 태그를 원하는대로 선택할 수 MYID을 변경
아 므르 Elgarhy

26
이제 jQuery에서 .prop()메서드 를 통해 속성에 액세스 할 수 있습니다 . 따라서 $("select").prop("selectedIndex",0);모든 드롭 다운에서 첫 번째 옵션을 빠르게 선택하는 데 사용할 수 있습니다 .
CBarr

3
속성을 설정하는 것만으로도 모든 브라우저에서 '변경'이벤트가 트리거되는지 알고 있습니까? Chrome에서 보이지만 광범위하게 테스트하지는 않았습니다. $('select').trigger('change');만일을 대비해서 다른 것을 추가 할 생각이었습니다 . 감사!
Brian Armstrong

3
var myDDL = $('myID')되기 위해 선택의 해시를해야한다var myDDL = $('#myID')
user1069816

1
이 방법은 저에게 효과적입니다.$('select option').first().prop('selected',true);
Lorenzo Magon

13

선택기가 잘못되었습니다. 아마도 찾고 있었을 것입니다.

$('select option:nth-child(1)')

이것은 또한 작동합니다.

$('select option:first-child')

3
CSS n 번째 자식 선택기 인덱스는 0이 아닌 1에서 시작
Sergey

10

RSolgberg에 대한 Ana 대체 솔루션 'onchange': 존재 하는 경우 이벤트 를 발생시킵니다 .

$("#target").val($("#target option:first").val());

jQuery로 <select>의 첫 번째 옵션을 선택하는 방법은 무엇입니까?


1
선택한 옵션을 여러 번 변경해야하는 경우 허용되는 답변보다 더 잘 작동합니다. 예를 들어 옵션을 필터링하고 일부를 표시하는 경우.
Guillaume Renoult 2016


4

당신이 원하는 것은 아마 :

$("select option:first-child")

이 코드

attr("selected", "selected");

은 "selected"속성을 "selected"로 설정하는 것입니다.

선택한 옵션을 원하는 경우 첫 번째 하위 항목인지 여부에 관계없이 선택기는 다음과 같습니다.

$("select").children("[selected]")

1
jQuery 1.6 이상을 사용 attr하는 prop경우로 교체
Jesan Fafon 2014 년

2

이전 답변이 최신 버전의 jQuery에서 작동하지 않기 때문에 대답하고 있습니다. 언제 작동이 멈췄는지 모르겠지만 문서에 따르면 .prop ()는 jQuery 1.6 이후 속성을 가져 오거나 설정하는 데 선호되는 방법이었습니다.

이것이 내가 작동하는 방법입니다 (jQuery 3.2.1 사용).

$('select option:nth-child(1)').prop("selected", true);

나는 knockoutjs를 사용하고 있으며 변경 바인딩이 위의 코드로 실행되지 않았으므로 끝에 .change ()를 추가했습니다.

내 솔루션에 필요한 것은 다음과 같습니다.

$('select option:nth-child(1)').prop("selected", true).change();

http://api.jquery.com/prop/ 문서의 .prop () 노트를 참조 하십시오.


2

다음은 javascript대부분의 경우에 작동 하는 간단한 솔루션입니다.

document.getElementById("selectId").selectedIndex = "0";

1

선택한 옵션의 첫 번째 자식 여부에 관계없이 텍스트를 확인하려는 경우.

var a = $("#select_id option:selected").text();
alert(a); //check if the value is correct.
if(a == "value") {-- execute code --}

두 번째 검색을 저장했습니다. 값을 확인하는 것보다 값을 변경하는 데 더 관심이 있었지만 이것은 내가 찾고 있던 것입니다. $('#myID option:selected').text('NEW STRING');
Ricky Payne

1
    var arr_select_val=[];

    $("select").each(function() { 
        var name=this.name;
            arr_select_val[name]=$('select option:first-child').val();
    });


// Process the array object
     $('.orders_status_summary_div').print(arr_select_val);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.