jQuery로 <select>의 첫 번째 옵션을 선택하는 방법

jQuery로 선택된 첫 번째 옵션을 어떻게 만듭니 까?

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

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

당신은 이것을 시도 할 수 있습니다

$("#target").prop("selectedIndex", 0);

// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);


// mark the first option as selected
$("#target option:first").attr('selected','selected');

사용할 때

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

첫 번째 옵션 값이 null 인 경우 Chrome 및 Safari에서 작동하지 않습니다.

나는 선호한다

$("#target option:first").attr('selected','selected');

모든 브라우저에서 작동 할 수 있기 때문입니다.

선택 입력의 값을 변경하거나 선택한 속성을 조정하면 DOM 요소의 기본 selectedOptions 특성을 겹쳐 쓸 수 있으며, 이로 인해 reset 이벤트가 호출 된 양식에서 요소가 올바르게 재설정되지 않을 수 있습니다.

jQuery의 prop 메소드를 사용하여 필요한 옵션을 지우고 설정하십시오.

$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");

$("#target")[0].selectedIndex = 0;

내가 생각하는 하나의 미묘한 점 상단이 답변을 투표에 대해 내가 발견 한이 올바르게 선택된 값을 변경하더라도, 그들은 사용자들이 위젯을 클릭하는 경우에만 그들이 옆에 체크 표시됩니다 (보고하는 요소를 업데이트하지 않는 것이있는 업데이트 된 요소).

.change () 호출을 끝에 연결하면 UI 위젯도 업데이트됩니다.

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

(Chrome 데스크톱에서 jQuery Mobile과 상자를 사용하는 동안이를 알았으므로 모든 경우에 해당되지 않을 수 있습니다).

옵션을 비활성화 한 경우 not ([disabled]) 을 추가하여 옵션 을 선택하지 못하게하여 다음과 같은 결과를 초래할 수 있습니다.

$("#target option:not([disabled]):first").attr('selected','selected')

선택한 여러 요소에 대해 값을 재설정하는 다른 방법은 다음과 같습니다.

$("selector").each(function(){

    /*Perform any check and validation if needed for each item */

    /*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */

    this.selectedIndex=0;

});

그렇게 간단합니다 :

$('#target option:first').prop('selected', true);

$('#newType option:first').prop('selected', true);

선택한 속성이 이미 있으면 attr selected 설정 만 작동하지 않는 것으로 나타났습니다. 지금 사용하는 코드는 먼저 선택한 속성을 설정 해제 한 다음 첫 번째 옵션을 선택합니다.

$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');

각 기능이 필요하지는 않지만 ...

$('select').each(function(){
    $(this).find('option:first').prop('selected', 'selected');
});

나를 위해 작동합니다.

내가하는 방법은 다음과 같습니다.

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');

마지막에 트리거 ( 'change')를 사용하여 나에게만 효과가있었습니다.

$("#target option:first").attr('selected','selected').trigger('change');

첫 번째 옵션을 기본값으로 사용하려는 경우

<select>
    <option value="">Please select an option below</option>
    ...

다음을 사용할 수 있습니다.

$('select').val('');

멋지고 간단합니다.

이것은 나를 위해 일했다!

$("#target").prop("selectedIndex", 0);

James Lee Baker의 답변 뒤에 : first : selected ...에 대한 브라우저 지원에 대한 의존성을 제거 하므로이 솔루션을 선호합니다.

$('#target').children().prop('selected', false);
$($('#target').children()[0]).prop('selected', 'selected');

나를 위해 다음 코드를 추가했을 때만 작동했습니다.

.change();

나를 위해 다음 코드를 추가했을 때만 작동했습니다. 양식을 "재설정"하고 싶었습니다. 즉, 모든 양식 선택의 첫 번째 옵션을 모두 선택하려면 다음 코드를 사용했습니다.

$('form').find('select').each(function(){ $(this).val($("select option:first").val()); $(this).change(); });

사용하다:

$("#selectbox option:first").val()

이 JSFiddle 에서 간단한 작업을 찾으십시오 .

나를 위해 다음 코드 줄을 추가했을 때만 작동했습니다.

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

$("#target").val(null);

크롬에서 잘 작동했습니다

select 요소의 jQuery 객체를 저장하는 경우 :

var jQuerySelectObject = $("...");

...

jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());

ECMAScript 6 과 함께 jQuery를 사용 하여이 최선의 접근 방식을 확인하십시오 .

$('select').each((i, item) => {
  var $item = $(item);
  $item.val($item.find('option:first').val()); 
});

옵션을 dropdown사용하여 선택할 수 있습니다 .

// 'N' can by any number of option.  // e.g.,  N=1 for first option
$("#DropDownId").val($("#DropDownId option:eq(N-1)").val()); 

$('select#id').val($('#id option')[index].value)

바꾸기 ID 특정 select 태그의 ID와와 인덱스 선택하려는 특정 요소를.

즉

<select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
                                        <option value="AB">AB</option>
                                        <option value="AK">AK</option>
                                        <option value="AL">AL</option>
</select>

첫 번째 요소 선택을 위해 다음 코드를 사용합니다.

$('select#ddlState').val($('#ddlState option')[0].value)

사용하다:

alert($( "#target option:first" ).text());