web-dev-qa-db-fra.com

Comment définir par programme la valeur d'un élément de sélection en utilisant JavaScript?

J'ai l'élément HTML <select> suivant:

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

En utilisant une fonction JavaScript avec le numéro leaveCode en tant que paramètre, comment sélectionner l'option appropriée dans la liste?

javascripthtmldom
343
brasskazoo
SelectElement("leaveCode", valueToSelect)

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

Si vous utilisez jQuery, vous pouvez également le faire:

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

Ceci sélectionnera le <option> avec la valeur 14.

Avec le langage Javascript simple, ceci peut également être réalisé avec deux méthodes DocumentNAME_ :

  • Avec document.querySelector , vous pouvez sélectionner un élément en fonction d'un sélecteur CSS:

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

  • En utilisant l’approche plus établie avec document.getElementById() , cela, comme le nom de la fonction l’implique, vous permet de sélectionner un élément en fonction de son idname__:

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

Vous pouvez exécuter le code ci-dessous pour voir ces méthodes et la fonction jQuery en action:

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

Vous ne répondez pas à la question, mais vous pouvez également sélectionner par index, où i est l'index de l'élément que vous souhaitez sélectionner:

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

Vous pouvez également parcourir les éléments pour sélectionner leur valeur d'affichage avec une boucle:

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

J'ai comparé les différentes méthodes:

Comparaison des différentes manières de définir la valeur d'une sélection avec JS ou jQuery

code:

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


});

Sortie sur une sélection avec ~ 4000 éléments:

1 ms

58 ms

612 ms

Avec Firefox 10. Remarque: La seule raison pour laquelle j'ai fait ce test, c'est parce que jQuery s'est très mal comporté sur notre liste avec environ 2 000 entrées (il y avait des textes plus longs entre les options). Nous avons eu environ 2 s de retard après un val ()

Remarque: la valeur est définie en fonction de la valeur réelle et non de la valeur du texte.

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

Cela devrait définir la sélection sur "Congé annuel"

9
William

J'ai essayé les solutions JavaScript/jQuery ci-dessus, telles que:

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

et

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

dans une application AngularJS, où il y avait un élément requis <select>.

Aucun d'entre eux ne fonctionne, car la validation du formulaire AngularJS n'est pas déclenchée. Bien que la bonne option ait été sélectionnée (et affichée dans le formulaire), la saisie est restée invalide ( ng-pristine et ng-invalid classes toujours présentes).

Pour forcer la validation AngularJS, appelez jQuery change () après avoir sélectionné une option:

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

et

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

Le moyen le plus simple si vous devez:
1) Cliquez sur un bouton qui définit l'option de sélection.
2) Aller à une autre page, où sélectionner option est
3) Avoir cette valeur d'option sélectionnée sur une autre page

1) vos liens de boutons (par exemple, sur la page d'accueil)

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

(où contact.php est votre page avec les options de sélection. Notez l'url de la page a? option = 1 ou 2)

2) mettez ce code sur votre deuxième page (mon cas contact.php)

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

) rendre la valeur d'option sélectionnée, en fonction du bouton cliqué

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

.. etc.
Il s’agit donc d’un moyen facile de passer la valeur à une autre page (avec la liste d’options de sélection) via GET dans l’URL. Pas de formulaires, pas d'identifiants .. juste 3 étapes et cela fonctionne parfaitement.

3
Lana

Devrait être quelque chose dans ce sens:

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

Supposons que votre formulaire s'appelle 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

Pourquoi ne pas ajouter une variable pour l'identifiant de l'élément et en faire une fonction réutilisable?

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

Vous voulez probablement ceci:

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

OR

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