it-swarm-es.tech

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

Tengo el siguiente elemento HTML <select>:

<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>

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

338
brasskazoo
SelectElement("leaveCode", valueToSelect)

function SelectElement(id, valueToSelect)
{    
    var element = document.getElementById(id);
    element.value = valueToSelect;
}
430
Mitchel Sellers

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

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

Esto seleccionará el <option> con el valor de 14.


Con Javascript plano, esto también se puede lograr con dos Document métodos :

  • Con document.querySelector , puede seleccionar un elemento basado en un selector CSS:

    document.querySelector('#leaveCode').value = '14'
    
  • Usando el enfoque más establecido con document.getElementById() , eso, como el nombre de la función implica, le permitirá seleccionar un elemento basado en su id:

    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>
96
Einar Ólafsson
function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);
28
Andrew Hedges

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;
14
Chase Seibert

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 ()

Tenga en cuenta también: estoy configurando el valor dependiendo del valor real, no del valor del texto

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

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

9
William

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 required <select>.

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 ( ng-pristine y ng-invalid clases aú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();
7
lumi77

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

La forma más fácil si necesitas:
1) Haga clic en un botón que define la opción de selección
2) Vaya 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 las opciones seleccionadas. 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í.
Por lo tanto, esta es una manera fácil de pasar el valor a otra página (con la lista de opciones seleccionadas) a través de GET en la URL. Sin formularios, sin identificaciones ... solo 3 pasos y funciona perfectamente.

3
Lana

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;
}
1
Stephen Wrighton

Supongamos que su formulario se llama form1 :

function selectValue(val)
{
  var lc = document.form1.leaveCode;
  for (i=0; i&lt;lc.length; i++)
  {
    if (lc.options[i].value == val)
    {
        lc.selectedIndex = i;
        return;
    }
  }
}
1
Milan Babuškov

¿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;
}
1
Robert Swisher

Lo más probable es que quieras esto:

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

OR

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