J'ai une boîte de sélection avec diverses options.Comment présélectionner l'option dans la boîte de sélection en utilisant jQuery
Lorsqu'une page est chargée, une option avec une valeur, par exemple 10, doit être présélectionnée avec jQuery.
Comment puis-je faire cela?
Lorsque la page se charge exécuter ce (vous pouvez le mettre en <body onload="//put code here">):
$("option[value='10']").attr('selected','selected');
Test de l'exemple:http://jsfiddle.net/VArCZ/
$(document).ready(function() {
$('#mySelectBox').val('10');
});
Bien que, jQuery ne serait pas nécessaire pour cela si la valeur intial sera statique:
<select id='mySelectBox'>
<option value='5'>5</option>
<option value='10' selected='selected'>10</option>
<option value='15'>15</option>
</select>
+1 Correct bien sûr! Je pourrais ajouter qu'avec '.val()' vous fournissez la valeur entre les balises '', pas l'attribut' value = '. Donc dans le cas de '' vous utiliseriez '$ (" # mySelectBox "). Val ('Ten')' –
@Doug - En fait, s'il y a un attribut de valeur présent, il correspond à ce premier. Si aucun attribut de valeur, il essaie de faire correspondre avec le contenu du texte. Mais merci pour le +1. : o) * exemple mis à jour: * http://jsfiddle.net/VArCZ/1/ – user113716
Mec .. sérieux? J'ai toujours pensé que cette méthode était #fail ... J'ai besoin de lire la source plus. Merci! –
code ci-dessus fonctionne, vous pouvez utiliser le code suivant:
$("option[value='10']").attr('selected','selected');
C'est le même morceau de code que la première réponse :) – Gigala
C'est quelque chose que je réutilise dans mon code. J'espère que ce sera utile. Vous pouvez activer la sortie de la console pour voir ce qui se passe. Cette fonction vous permet de faire correspondre l'option souhaitée en fonction de la valeur de l'option ou du texte de l'option, comme indiqué dans l'exemple ci-dessous.
Le 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>
Le JavaScript (avec 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);
}
});
Dans la dernière version jQuery cela fonctionne pour moi:
$("option[value='10']").prop('selected',true);
Vous devez supprimer l'opérateur descendant (espace) du sélecteur pour qu'il fonctionne. : o) – user113716
@patrick Merci. Je l'ai corrigé – Adam
+1 Je préfère cette approche plus que d'utiliser 'val()' pour les définir. Je ne suis même pas sûr de savoir comment 'val()' est supposé fonctionner si vous présentez une liste de sélection multiple ... – Funka