Jak zrobić pierwszą opcję <select> wybraną za pomocą jQuery

Jak zrobić pierwszą opcję wybraną w jQuery?

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

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

Możesz tego spróbować

$("#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');

Kiedy używasz

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

to nie będzie działać w Chrome i Safari, jeśli pierwsza opcja ma wartość null.

wolę

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

ponieważ może działać we wszystkich przeglądarkach.

Zmiana wartości wejściowego wyboru lub dostosowanie wybranego atrybutu może zastąpić domyślną właściwość selectedOptions elementu DOM, co może spowodować, że element może nie zostać poprawnie zresetowany w formie, w której wywołano zdarzenie resetowania.

Użyj metody prop jQuery, aby wyczyścić i ustawić potrzebną opcję:

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

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

Jedna subtelna myślę , odkryłem na temat najczęściej głosowanych odpowiedzi, polega na tym, że nawet jeśli prawidłowo zmieniają wybraną wartość, nie aktualizują elementu, który widzi użytkownik (tylko po kliknięciu widżetu zobaczy on zaznaczenie obok zaktualizowany element).

Połączenie łańcuchowe wywołania .change () do końca również zaktualizuje widget interfejsu użytkownika.

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

(Zauważ, że zauważyłem to podczas korzystania z jQuery Mobile i pudełka na pulpicie Chrome, więc może nie być tak wszędzie).

Jeśli masz wyłączone opcje, możesz dodać opcję nie ([wyłączone]), aby zapobiec ich wybraniu, co powoduje:

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

Innym sposobem resetowania wartości (dla wielu wybranych elementów) może być:

$("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;

});

Proste takie:

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

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

Przekonałem się, że samo ustawienie wybranego atrybutu nie działa, jeśli istnieje już wybrany atrybut. Kod, którego teraz używam, najpierw rozbroi wybrany atrybut, a następnie wybierze pierwszą opcję.

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

Chociaż każda funkcja prawdopodobnie nie jest konieczna ...

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

pracuje dla mnie.

Oto jak bym to zrobił:

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

Na mnie zadziałało tylko przy użyciu wyzwalacza („zmiana”) na końcu, w następujący sposób:

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

Jeśli zamierzasz użyć pierwszej opcji jako domyślnej, takiej jak

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

możesz po prostu użyć:

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

To jest miłe i proste.

To zadziałało dla mnie!

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

Na odwrocie odpowiedzi Jamesa Lee Bakera wolę to rozwiązanie, ponieważ usuwa ono zależność od obsługi przeglądarki dla: po pierwsze: wybrane ...

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

Dla mnie działało to tylko wtedy, gdy dodałem następujący kod:

.change();

Dla mnie działało to tylko wtedy, gdy dodałem następujący kod: Ponieważ chciałem „zresetować” formularz, to znaczy wybrać wszystkie pierwsze opcje wszystkich zaznaczeń formularza, użyłem następującego kodu:

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

Posługiwać się:

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

Proszę znaleźć prosty sposób działania w tym JSFiddle .

Dla mnie zadziałało to tylko wtedy, gdy dodałem następujący wiersz kodu

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

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

działało dobrze w chromie

Jeśli przechowujesz obiekt jQuery wybranego elementu:

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

...

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

Sprawdź to najlepsze podejście za pomocą jQuery z ECMAScript 6 :

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

Możesz wybrać dowolną opcję dropdown, korzystając z niej.

// '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)

Zastąp identyfikator określonym identyfikatorem tagu i indeksem konkretny element, który chcesz wybrać.

to znaczy

<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>

Więc tutaj do wyboru pierwszego elementu użyję następującego kodu:

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

Posługiwać się:

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