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

Tengo el siguiente <select>elemento 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 leaveCodenúmero como parámetro, ¿cómo selecciono la opción adecuada en la lista?

Puedes usar esta función:

selectElement('leaveCode', '11')

function selectElement(id, valueToSelect) {    
    let element = document.getElementById(id);
    element.value = valueToSelect;
}

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

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

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

Con Javascript simple, esto también se puede lograr con dos Documentmé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 lo implica el nombre de la función, le permitirá seleccionar un elemento basado en su id:

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

Puede ejecutar el siguiente código recortado 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>

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

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

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

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 tuvo un rendimiento súper pobre 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 ()

Nota también: estoy configurando el valor dependiendo del valor real, no del valor del texto.

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

Eso debería establecer la selección en "Vacaciones anuales"

Probé las soluciones basadas en JavaScript / jQuery anteriores, 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();

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

La forma más fácil si necesita:
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) Haga que el valor de esa opción se seleccione en otra página

1) los enlaces de sus botones (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? option = 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) seleccione el valor de la opción, según el botón en el que haya hecho clic

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

.. y así.
Entonces, 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 perfecto.

¿Por qué no agregar una variable para el Id del elemento y convertirlo en una función reutilizable?

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

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

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

Si usa PHP, puede intentar 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>';

Lo más probable es que quieras esto:

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

O

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

function selecetElement() {
 var selectedValue = document.getElementById('leaveCode');
 selectedValue.value = "11";
}

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

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

Si eso no funciona, tal vez lo acerque a una solución: P