Tengo un cuadro de selección con varias opciones.Cómo preseleccionar la opción en el cuadro de selección usando jQuery
Cuando una página se carga, una opción con un valor, por ejemplo 10, debe preseleccionarse con jQuery.
¿Cómo puedo hacer eso?
Cuando se carga la página de ejecutar este (puede ponerlo en <body onload="//put code here">):
$("option[value='10']").attr('selected','selected');
probar el ejemplo:http://jsfiddle.net/VArCZ/
$(document).ready(function() {
$('#mySelectBox').val('10');
});
Aunque, no se requeriría jQuery para esto si el valor intial será estático:
<select id='mySelectBox'>
<option value='5'>5</option>
<option value='10' selected='selected'>10</option>
<option value='15'>15</option>
</select>
+1 correcta ¡por supuesto! Podría agregar que con '.val()' proporciona el valor entre las etiquetas '', no el atributo 'value ='. Entonces en el caso de '' usaría '$ (" # mySelectBox "). Val ('Ten')' –
@Doug - En realidad, si hay un atributo de valor presente, coincide con eso primero. Si no hay ningún atributo de valor, intenta hacer coincidir el contenido del texto. Pero gracias por el +1. : o) * ejemplo actualizado: * http://jsfiddle.net/VArCZ/1/ – user113716
Amigo ... ¿en serio? Siempre pensé que el método era #fail ... Necesito leer más la fuente. ¡Gracias! –
Por encima de código está trabajando puede utilizar el código siguiente:
$("option[value='10']").attr('selected','selected');
Ese es el mismo código que la primera respuesta :) – Gigala
Esto es algo que me re-uso en mi código. Espero que sea de ayuda. Puede habilitar la salida de la consola para ver qué está sucediendo. Con esta función, puede hacer coincidir la opción deseada según el valor de la opción o el texto de la opción, como se muestra en el siguiente ejemplo.
el código 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>
El Javascript (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);
}
});
En la última versión de jQuery esto funciona para mí:
$("option[value='10']").prop('selected',true);
Deberá quitar el operador descendiente (espacio) del selector para que funcione. : o) – user113716
@patrick Gracias. Lo corregí – Adam
+1 Prefiero este enfoque más que usar 'val()' para establecerlos. Ni siquiera estoy seguro de cómo 'val()' se supone que funciona si está presentando un cuadro de lista de selección múltiple ... – Funka