validacion - validar nombre javascript

¿Cómo establezco mediante programación el valor de un elemento de cuadro de selección utilizando JavaScript?

Question

Tengo el siguiente elemento <select> HTML:

<select id="leaveCode" name="leaveCode">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>

Usando una función de JavaScript con el número de leaveCode como parámetro, ¿cómo selecciono la opción apropiada en la lista?

Answer 1

¿Por qué no agregar una variable para la identificación del elemento y convertirla en una función reutilizable?

function SelectElement(selectElementId, valueToSelect)
{
var element = document.getElementById(selectElementId);
element.value = valueToSelect;
}

Answer 2

Comparé los diferentes métodos:

Comparación de las diferentes formas sobre cómo establecer un valor de una selección con JS o jQuery

código:

$(function() {
var oldT = new Date().getTime();
var element = document.getElementById(''myId'');
element.value = 4;
console.error(new Date().getTime() - oldT);
oldT = new Date().getTime();
$("#myId option").filter(function() {
return $(this).attr(''value'') == 4;
}).attr(''selected'', true);
console.error(new Date().getTime() - oldT);
oldT = new Date().getTime();
$("#myId").val("4");
console.error(new Date().getTime() - oldT);
});

Salida en una selección con ~ 4000 elementos:

1 ms

58 ms

612 ms

Con Firefox 10. Nota: la única razón por la que hice esta prueba fue porque jQuery se desempeñó muy mal en nuestra lista con ~ 2000 entradas (tenían textos más largos entre las opciones). Tuvimos aproximadamente 2 s de retraso después de un val ()

También tenga en cuenta: estoy configurando el valor dependiendo del valor real, no del valor del texto

Answer 3

Debería haber algo en este sentido:

function setValue(inVal){
var dl = document.getElementById(''leaveCode'');
var el =0;
for (var i=0; i<dl.options.length; i++){
if (dl.options[i].value == inVal){
el=i;
break;
}
}
dl.selectedIndex = el;
}

Answer 4

Hay diferentes maneras de seleccionar valores de desplegable usando Javascript .

Lo más probable es que quieras esto:

$("._statusDDL").val(''2'');

O

$(''select'').prop(''selectedIndex'', 3);

Answer 5

La forma más fácil si necesitas:
1) Haga clic en un botón que define la opción de selección
2) Ir a otra página, donde la opción de selección es
3) Tener ese valor de opción seleccionado en otra página

1) sus enlaces de botón (por ejemplo, en la página de inicio)

<a onclick="location.href=''contact.php?option=1'';" style="cursor:pointer;">Sales</a>
<a onclick="location.href=''contact.php?option=2'';" style="cursor:pointer;">IT</a>

(donde contact.php es su página con opciones de selección. Tenga en cuenta que la url de la página tiene? opción = 1 o 2)

2) ponga este código en su segunda página (mi caso contact.php )

<?
if (isset($_GET[''option'']) && $_GET[''option''] != "") {
$pg = $_GET[''option''];
} ?>

3) haga que el valor de la opción sea seleccionado, dependiendo del botón pulsado

<select>
<option value="Sales" <? if ($pg == ''1'') { echo "selected"; } ?> >Sales</option>
<option value="IT" <? if ($pg == ''2'') { echo "selected"; } ?> >IT</option>
</select>

.. y así.
Así que esta es una manera fácil de pasar el valor a otra página (con la lista de opciones de selección) a través de GET en la URL. Sin formularios, sin identificaciones ... solo 3 pasos y funciona perfectamente.

Answer 6

Me temo que no puedo probar esto en este momento, pero en el pasado, creo que tuve que dar a cada etiqueta de opción una identificación, y luego hice algo como:

document.getElementById("optionID").select();

Si eso no funciona, quizás te acerque más a una solución: P

Answer 7

No responde la pregunta, pero también puede seleccionar por índice, donde i es el índice del elemento que desea seleccionar:

var formObj = document.getElementById(''myForm'');
formObj.leaveCode[i].selected = true;

También puede recorrer los elementos para seleccionar por valor de visualización con un bucle:

for (var i = 0, len < formObj.leaveCode.length; i < len; i++)
if (formObj.leaveCode[i].value == ''xxx'') formObj.leaveCode[i].selected = true;

Answer 8

Probé las soluciones anteriores basadas en JavaScript / jQuery, tales como:

$("#leaveCode").val("14");

y

var leaveCode = document.querySelector(''#leaveCode'');
leaveCode[i].selected = true;

en una aplicación AngularJS, donde había un elemento <select> requerido .

Ninguno de ellos funciona, porque la validación del formulario AngularJS no se activa. Aunque se seleccionó la opción correcta (y se muestra en el formulario), la entrada permaneció inválida (las clases ng-pristine y ng-invalid todavía están presentes).

Para forzar la validación de AngularJS, llame a jQuery change() después de seleccionar una opción:

$("#leaveCode").val("14").change();

y

var leaveCode = document.querySelector(''#leaveCode'');
leaveCode[i].selected = true;
$(leaveCode).change();

Answer 9

Si está utilizando jQuery también puede hacer esto.

$(''#leaveCode'').val(''14'');

Esto seleccionará la opción con el valor de 14.

Editar:

Con Javascript simple, esto también se puede lograr con dos métodos de documento

con querySelector , puede seleccionar un elemento basado en el selector CSS

document.querySelector(''#leaveCode'').value = ''14''

O el enfoque más establecido, con getDocumentById , que, como lo indica el nombre de la función, le permitirá seleccionar un elemento basado en el id allí.

document.getElementById(''leaveCode'').value = ''14''

Puede ejecutar el siguiente código cortado para ver estos métodos y la función jQuery en acción.

const jQueryFunction = () => {
$(''#leaveCode'').val(''14'');
}
const querySelectorFunction = () => {
document.querySelector(''#leaveCode'').value = ''14''
}
const getElementByIdFunction = () => {
document.getElementById(''leaveCode'').value=''14''
}

input {
display:block;
margin: 10px;
padding: 10px
}

<select id="leaveCode" name="leaveCode">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
<input type="button" value="$(''#leaveCode'').val(''14'');" onclick="jQueryFunction()" />
<input type="button" value="document.querySelector(''#leaveCode'').value = ''14''" onclick="querySelectorFunction()" />
<input type="button" value="document.getElementById(''leaveCode'').value = ''14''" onclick="getElementByIdFunction()" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 10

Si usas PHP puedes probar algo como esto:

$value = ''11'';
$first = '''';
$second = '''';
$third = '''';
$fourth = '''';
switch($value) {
case ''10'' :
$first = ''selected'';
break;
case ''11'' :
$second = ''selected'';
break;
case ''14'' :
$third = ''selected'';
break;
case ''17'' :
$fourth = ''selected'';
break;
}
echo''
<select id="leaveCode" name="leaveCode">
<option value="10" ''. $first .''>Annual Leave</option>
<option value="11" ''. $second .''>Medical Leave</option>
<option value="14" ''. $third .''>Long Service</option>
<option value="17" ''. $fourth .''>Leave Without Pay</option>
</select>'';

Answer 11

Supongamos que su formulario se llama form1 :

function selectValue(val)
{
var lc = document.form1.leaveCode;
for (i=0; i<lc.length; i++)
{
if (lc.options[i].value == val)
{
lc.selectedIndex = i;
return;
}
}
}

Answer 12

function foo(value)
{
var e = document.getElementById(''leaveCode'');
if(e) e.value = value;
}

Answer 13

SelectElement("leaveCode", valueToSelect)
function SelectElement(id, valueToSelect)
{
var element = document.getElementById(id);
element.value = valueToSelect;
}

Answer 14

document.getElementById(''leaveCode'').value = ''10'';

Eso debería establecer la selección a "Licencia anual".

Answer 15

function setSelectValue (id, val) {
document.getElementById(id).value = val;
}
setSelectValue(''leaveCode'', 14);