Ho una casella di selezione con varie opzioni.Come preselezionare l'opzione nella casella di selezione usando jQuery
Quando una pagina carica, un'opzione con un valore, ad esempio 10, deve essere preselezionata con jQuery.
Come posso farlo?
Quando la pagina viene caricata eseguire questo (puoi inserirlo in <body onload="//put code here">):
$("option[value='10']").attr('selected','selected');
prova l'esempio:http://jsfiddle.net/VArCZ/
$(document).ready(function() {
$('#mySelectBox').val('10');
});
Anche se, jQuery non sarebbe necessario per questo se il valore intial sarà statica:
<select id='mySelectBox'>
<option value='5'>5</option>
<option value='10' selected='selected'>10</option>
<option value='15'>15</option>
</select>
+1 corretta ovviamente! Potrei aggiungere che con '.val()' fornite il valore tra i ' tag, non l'attributo' value = '. Quindi nel caso di '' si usa '$ (" # mySelectBox "). Val ('Ten')' –
@Doug - In realtà, se è presente un attributo valore, combacia con quello prima. Se nessun attributo valore, allora prova a corrispondere con il contenuto del testo. Ma grazie per il +1. : o) * esempio aggiornato: * http://jsfiddle.net/VArCZ/1/ – user113716
Amico .. sul serio? Ho sempre pensato che il metodo fosse #fail ... Ho bisogno di leggere di più la fonte. Grazie! –
Sopra il codice sta lavorando è possibile utilizzare il codice seguente:
$("option[value='10']").attr('selected','selected');
Questo è lo stesso pezzo di codice della prima risposta :) – Gigala
Questo è qualcosa che ho ri-uso nel mio codice. Spero che sia di aiuto Puoi abilitare l'output della console per vedere cosa sta succedendo. Con questa funzione è possibile abbinare l'opzione desiderata in base al valore dell'opzione o al testo dell'opzione, come mostrato nell'esempio seguente.
il codice HTML:
<select id="languages">
<option value="01">JAVA</option>
<option value="02">HTML</option>
</select>
<select class="data-interchange">
<option value="A">JSON</option>
<option value="B">XML</option>
</select>
La JavaScript (utilizzando jQuery)
$(function() {
preSelectDropDownList("#languages", "val", "02");
preSelectDropDownList(".data-interchange", "text", "XML");
function preSelectDropDownList(selector, checkAgaints, neddle) {
//console.log(selector, checkAgaints, neddle);//DEBUG
let hayStack = "";
neddle = neddle == null ? "" : neddle;
$(selector + " option").filter(function() {
if (checkAgaints === "text") {
hayStack = $(this).text();
} else if (checkAgaints === "val") {
hayStack = $(this).val();
} else {
alert("Error on Param 2.Only text or value allowed -->" + checkAgaints);
}
var result = hayStack.includes(neddle);
//console.log(neddle+" vs "+hayStack+" = "+result);//DEBUG
//console.log("Selected return", result);//DEBUG
return result;
}).prop('selected', true);
}
});
Nell'ultima versione jQuery questo funziona per me:
$("option[value='10']").prop('selected',true);
È necessario rimuovere l'operatore discendente (spazio) dal selettore affinché funzioni. : o) – user113716
@patrick Grazie. L'ho corretto – Adam
+1 Preferisco questo approccio più che usare 'val()' per impostarli. Non sono nemmeno sicuro di come 'val()' funzioni se si presenta una listbox a selezione multipla ... – Funka