Domanda

Come faccio a selezionare la prima opzione selezionata con jQuery?

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>
È stato utile?

Soluzione

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

Altri suggerimenti

Puoi provare

$("#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 utilizza

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

questo non funzionerà in Chrome e Safari se il primo valore dell'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à defaultOptions predefinita dell'elemento DOM, risultando in un elemento che potrebbe non essere ripristinato correttamente in un modulo in cui è stato chiamato l'evento di ripristino.

Usa 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 che ho scoperto sulle risposte più votate è che anche se cambiano correttamente il valore selezionato, non aggiornano l'elemento che l'utente vede (solo quando fa clic il widget vedrà un segno di spunta accanto all'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, puoi aggiungere not ([disabilitato]) per evitare di selezionarle il cui risultato è il seguente:

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

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

Semplice come quello:

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

Ho scoperto che la sola impostazione di attr selezionato non funziona se c'è già un attributo selezionato. Il codice che uso ora disattiverà prima l'attributo selezionato, quindi selezionerà la prima opzione.

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

Ecco come lo farei:

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

Sebbene probabilmente ciascuna funzione non sia necessaria ...

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

funziona per me.

Ha funzionato solo per me usando un trigger ('change') alla fine, in questo modo:

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

Se hai intenzione di utilizzare la prima opzione come predefinita

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

allora puoi semplicemente usare:

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

È bello e semplice.

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

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

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

.Per passare ();

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

$ ( 'forma'). Find ( 'selezionare'). Each (function () {      $ (this) .val ($ (" seleziona l'opzione: first "). val ());      $ (This) .Per passare ();  });

Usa:

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

Trova il funzionamento semplice in questo JSFiddle .

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

ha funzionato bene in Chrome

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

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

...

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

Verifica questo migliore approccio usando jQuery con ECMAScript & nbsp; 6 :

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

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

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

Puoi selezionare qualsiasi opzione da menu a discesa 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 opzione') [index] .value)

Sostituisci ID con un particolare ID tag di selezione e indice con un 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)

Questo ha funzionato per me!

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

Usa:

alert($( "#target option:first" ).text());
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top