Ho una casella selezionata:

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
  <option value="3">Number 3</option>
  <option value="4">Number 4</option>
  <option value="5">Number 5</option>
  <option value="6">Number 6</option>
  <option value="7">Number 7</option>
</select>

Vorrei impostare una delle opzioni come "selezionato" in base al suo indice selezionato.

Ad esempio, se sto cercando di impostare "Numero 3", sto provando questo:

$('#selectBox')[3].attr('selected', 'selected');

Ma questo non funziona. Come posso impostare un'opzione come selezionata in base al suo indice usando jQuery?

Grazie!

NOTA : la risposta dipende da jQuery 1.6.1+

$('#selectBox :nth-child(4)').prop('selected', true); // To select via index
$('#selectBox option:eq(3)').prop('selected', true);  // To select via value

Grazie per il commento, .getnon funzionerà poiché restituisce un elemento DOM, non uno jQuery. Tieni presente che la .eqfunzione può essere utilizzata anche al di fuori del selettore, se preferisci.

$('#selectBox option').eq(3).prop('selected', true);

Puoi anche essere più conciso / leggibile se vuoi usare il valore , invece di fare affidamento sulla selezione di un indice specifico :

$("#selectBox").val("3");

Nota: .val(3) funziona anche per questo esempio, ma i valori non numerici devono essere stringhe, quindi ho scelto una stringa per coerenza.
(ad es. <option value="hello">Number3</option>richiede l'utilizzo.val("hello") )

Questo può anche essere utile, quindi ho pensato di aggiungerlo qui.

Se desideri selezionare un valore in base al valore dell'articolo e non all'indice di tale articolo, puoi effettuare le seguenti operazioni:

Il tuo elenco selezionato:

<select id="selectBox">
    <option value="A">Number 0</option>
    <option value="B">Number 1</option>
    <option value="C">Number 2</option>
    <option value="D">Number 3</option>
    <option value="E">Number 4</option>
    <option value="F">Number 5</option>
    <option value="G">Number 6</option>
    <option value="H">Number 7</option>
</select>

Il jquery:

$('#selectBox option[value=C]').attr('selected', 'selected');

$('#selectBox option[value=C]').prop('selected', true);

L'articolo selezionato sarebbe "Numero 2" ora.

Prova questo invece:

$("#selectBox").val(3);

Ancora più semplice:

$('#selectBox option')[3].selected = true;

# Set element with index
$("#select option:eq(2)").attr("selected", "selected");

# Set element by text
$("#select").val("option Text").attr("selected", "selected");

quando si desidera selezionare con le principali modalità di selezione dei set, è possibile utilizzare
$('#select option').removeAttr('selected');per rimuovere le selezioni precedenti.

# Set element by value
$("#select").val("2");

# Get selected text
$("#select").children("option:selected").text();  # use attr() for get attributes
$("#select option:selected").text(); # use attr() for get attributes 

# Get selected value
$("#select option:selected").val();
$("#select").children("option:selected").val();
$("#select option:selected").prevAll().size();
$("option:selected",this).val();

# Get selected index
$("#select option:selected").index();
$("#select option").index($("#select option:selected"));

# Select First Option
$("#select option:first");

# Select Last Item
$("#select option:last").remove();


# Replace item with new one
$("#select option:eq(1)").replaceWith("<option value='2'>new option</option>");

# Remove an item
$("#select option:eq(0)").remove();

La cosa importante da capire è che val()per un selectelemento restituisce il valore dell'opzione selezionata, ma non il numero di elementiselectedIndex in javascript.

Per selezionare l'opzione con value="7"te puoi semplicemente usare:

$('#selectBox').val(7); //this will select the option with value 7.

Per deselezionare l'opzione utilizzare un array vuoto:

$('#selectBox').val([]); //this is the best way to deselect the options

E ovviamente puoi selezionare più opzioni *:

$('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7

* Tuttavia, per selezionare più opzioni, l' <select>elemento deve avere un MULTIPLEattributo, altrimenti non funzionerà.

Ho sempre avuto problemi con prop ('selezionato'), per me ha sempre funzionato:

//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');

Prova questo:

$('select#mySelect').prop('selectedIndex', optionIndex);

Alla fine, attiva un evento .change:

$('select#mySelect').prop('selectedIndex', optionIndex).change();

Spero che questo possa aiutare anche

$('#selectBox option[value="3"]').attr('selected', true);

selezionare la terza opzione

$('#selectBox').val($('#selectBox option').eq(2).val());

Esempio su jsfiddle

NB:

$('#selectBox option')[3].attr('selected', 'selected') 

non è corretto, la deferenza dell'array ti dà l'oggetto dom, non un oggetto jquery, quindi fallirà con un TypeError, ad esempio in FF con: "$ ('# opzione selectBox') [3] .attr () non una funzione ".

Per chiarire le risposte di Marc e John Kugelman, è possibile utilizzare:

$('#selectBox option').eq(3).attr('selected', 'selected')

get() non funzionerà se utilizzato nel modo specificato perché ottiene l'oggetto DOM, non un oggetto jQuery, quindi la seguente soluzione non funzionerà:

$('#selectBox option').get(3).attr('selected', 'selected')

eq()ottiene filtra il jQuery impostato su quello dell'elemento con l'indice specificato. È più chiaro di $($('#selectBox option').get(3)). Non è poi così efficiente. $($('#selectBox option')[3])è più efficiente (vedi test case ).

In realtà non è necessario l'oggetto jQuery. Questo farà il trucco:

$('#selectBox option')[3].selected = true;

http://api.jquery.com/get/

http://api.jquery.com/eq/

Un altro punto di vitale importanza:

L'attributo "selezionato" non è il modo in cui si specifica un pulsante di opzione selezionato (almeno in Firefox e Chrome). Utilizzare l'attributo "controllato":

$('#selectBox option')[3].checked = true;

Lo stesso vale per le caselle di controllo.

In 1.4.4 viene visualizzato un errore: $ ("Opzione # selectBox") [3] .attr non è una funzione

Questo funziona: $('#name option:eq(idx)').attr('selected', true);

Dove si #nametrova id di selezione ed idxè il valore dell'opzione che si desidera selezionare.

L' attributo javascript selectedIndex è la strada giusta perché, è javascript puro e funziona su più browser:

$('#selectBox')[0].selectedIndex=4;

Ecco una demo di jsfiddle con due menu a discesa che usano uno per impostare l'altro:

<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
</select>

Puoi anche chiamarlo prima di cambiare il valore selezionatoIndex se quello che vuoi è l'attributo "selezionato" sul tag opzione ( ecco il violino ):

$('#selectBox option').removeAttr('selected')
   .eq(this.selectedIndex).attr('selected','selected');

//funcion para seleccionar por el text del select
var text = '';
var canal = ($("#name_canal").val()).split(' ');
$('#id_empresa option').each(function(i, option) {
        text = $('#id_empresa option:eq('+i+')').text();
        if(text.toLowerCase() == canal[0].toLowerCase()){
            $('#id_empresa option:eq('+i+')').attr('selected', true);
        }
    });

Uso spesso il trigger ("modifica") per farlo funzionare

$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');

Esempio con id select = selectA1 e position_index = 0 (opzione frist in select):

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');

$('#selectBox option').get(3).attr('selected', 'selected')

Usando quanto sopra ho continuato a ricevere errori in webkit (Chrome) dicendo:

"Uncaught TypeError: Object # non ha un metodo 'attr'"

Questa sintassi arresta tali errori.

$($('#selectBox  option').get(3)).attr('selected', 'selected');

Seleziona l'elemento in base al valore nell'elenco di selezione (specialmente se i valori delle opzioni hanno uno spazio o un carattere strano in esso) semplicemente facendo questo:

$("#SelectList option").each(function () {
    if ($(this).val() == "1:00 PM")
        $(this).attr('selected', 'selected');
});

Inoltre, se si dispone di un menu a discesa (anziché una selezione multipla), è possibile che si desideri eseguire una operazione in break;modo da non sovrascrivere il primo valore trovato.

Ho bisogno di una soluzione che non abbia valori codificati nel file js; usando selectedIndex. La maggior parte delle soluzioni fornite ha fallito un browser. Questo sembra funzionare in FF10 e IE8 (qualcun altro può testare in altre versioni)

$("#selectBox").get(0).selectedIndex = 1; 

Se vuoi solo selezionare un articolo in base a una particolare proprietà di un articolo, l'opzione jQuery di tipo [prop = val] otterrà quell'elemento. Ora non mi interessa l'indice, volevo solo l'oggetto in base al suo valore.

$('#mySelect options[value=3]).attr('selected', 'selected');

Ho affrontato lo stesso problema. Per prima cosa devi esaminare gli eventi (ovvero quale evento si sta verificando per primo).

Per esempio:

Il primo evento sta generando la casella di selezione con le opzioni.

Il secondo evento sta selezionando l'opzione predefinita usando qualsiasi funzione come val () ecc.

È necessario assicurarsi che il secondo evento si verifichi dopo il primo evento .

Per ottenere ciò, prendiamo due funzioni diciamo generateSelectbox () (per la casella di selezione del genrating) e selectDefaultOption ()

È necessario assicurarsi che selectDefaultOption () sia chiamato solo dopo l'esecuzione di generateSelectbox ()

Puoi anche avviare più valori se la casella selezionata è multipl:

$('#selectBox').val(['A', 'B', 'C']);

puoi impostare dinamicamente il valore della variabile di selezione così come l'opzione sarà selezionata. Puoi provare il seguente codice

codice:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

      $(function(){
            $('#allcheck').click(function(){
             // $('#select_option').val([1,2,5]);also can use multi selectbox
              // $('#select_option').val(1);
               var selectoption=3;
           $("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected');
    });

});

CODICE HTML:

   <select id="selectBox">
       <option value="0">Number 0</option>
       <option value="1">Number 1</option>
       <option value="2">Number 2</option>
       <option value="3">Number 3</option>
       <option value="4">Number 4</option>
       <option value="5">Number 5</option>
       <option value="6">Number 6</option>
       <option value="7">Number 7</option>
 </select> <br>
<strong>Select&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>

In breve:

$("#selectBox").attr("selectedIndex",index)

dove index è l'indice selezionato come intero.