Come effettuare la prima opzione di <select> selezionata con jQuery

Come faccio la prima opzione di selezionato con jQuery?

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

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

Puoi provare questo

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

Quando si usa

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

questo non funzionerà in Chrome e Safari se il primo valore di opzione è null.

preferisco

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

perché può funzionare in tutti i browser.

La modifica del valore dell'input di selezione o la regolazione dell'attributo selezionato possono sovrascrivere la proprietà selectedOptions predefinita dell'elemento DOM, causando un elemento che potrebbe non ripristinarsi correttamente in un modulo in cui è stato chiamato l'evento di ripristino.

Utilizzare il metodo prop di jQuery per cancellare e impostare l'opzione necessaria:

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

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

Un punto sottile che penso di aver scoperto sulle risposte più votate è che anche se cambiano correttamente il valore selezionato, non aggiornano l'elemento che l'utente vede (solo quando fanno clic sul widget vedranno un segno di spunta accanto al elemento aggiornato).

Anche il concatenamento di una chiamata .change () alla fine aggiornerà anche il widget UI.

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

(Nota che ho notato questo mentre usavo jQuery Mobile e una scatola sul desktop Chrome, quindi questo potrebbe non essere il caso ovunque).

Se hai disabilitato le opzioni, potresti non aggiungere ([disabilitato]) per impedire di selezionarle, il che si traduce in quanto segue:

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

Un altro modo per ripristinare i valori (per più elementi selezionati) potrebbe essere questo:

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

});

Semplice così:

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

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

Ho scoperto che solo l'impostazione di attr selezionato non funziona se esiste già un attributo selezionato. Il codice che uso ora disinserirà prima l'attributo selezionato, quindi selezionerà la prima opzione.

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

Sebbene ciascuna funzione probabilmente non sia necessaria ...

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

per me va bene.

Ecco come lo farei:

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

Alla fine ha funzionato solo con un trigger ('change'), in questo modo:

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

Se hai intenzione di utilizzare la prima opzione come un valore predefinito

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

allora puoi semplicemente usare:

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

È bello e semplice.

Questo ha funzionato per me!

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

Sul retro della risposta di James Lee Baker, preferisco questa soluzione poiché rimuove la dipendenza dal supporto del browser per: primo: selezionato ...

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

Per me ha funzionato solo quando ho aggiunto il seguente codice:

.change();

Per me ha funzionato solo quando ho aggiunto il seguente codice: Siccome volevo "resettare" il modulo, cioè selezionare tutte le prime opzioni di tutte le selezioni del modulo, ho usato il seguente codice:

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

Uso:

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

Si prega di trovare il lavoro semplice in questo JSFiddle .

Per me, ha funzionato solo quando ho aggiunto la seguente riga di codice

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

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

ha funzionato bene in cromo

Se stai memorizzando l'oggetto jQuery dell'elemento select:

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

...

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

Controlla questo migliore approccio usando jQuery con ECMAScript 6 :

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

È possibile selezionare qualsiasi opzione dropdownda usandola.

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

Sostituisci l' id con un particolare ID di selezione tag e indicizza con l'elemento particolare che desideri selezionare.

vale a dire

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

Quindi qui per la selezione del primo elemento userò il seguente codice:

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

Uso:

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