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

Question

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 leaveCode nombre en tant que paramètre, comment sélectionner l'option appropriée dans la liste?

Answer 1

SelectElement("leaveCode", valueToSelect)

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

Answer 2

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

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

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

En Javascript, cela peut également être réalisé avec deux Méthodes Document :

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

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

• Utilisation de l'approche plus courante avec document.getElementById () , qui, comme le nom de la fonction l’implique, vous permet de sélectionner un élément en fonction de son id :

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

Vous pouvez exécuter le code ci-dessous afin de 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>

Answer 3

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

Answer 4

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 les sélectionner par 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;

Answer 5

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

Comparaison des différentes méthodes permettant de définir une valeur de 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 de ~ 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 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 ()

Notez également: je règle la valeur en fonction de la valeur réelle et non de la valeur du texte

Answer 6

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

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

.

Answer 7

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 requis < sélectionner > élément.

Aucun d’entre eux ne fonctionne car la validation du formulaire AngularJS n’est pas déclenchée. Bien que l'option appropriée ait été sélectionnée (et affichée dans le formulaire), l'entrée est restée non valide (les classes ng-pristine et ng-invalid sont 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();

Answer 8

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

Answer 9

Le moyen le plus simple si vous avez besoin de:
1) Cliquez sur un bouton qui définit l'option de sélection
2) Aller à une autre page, où l'option de sélection est
3) Sélectionnez cette option 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 des options de sélection. Notez que l'URL de la page contient? option = 1 ou 2)

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

<?
if (isset(
 Le moyen le plus simple si vous avez besoin de: 

1) Cliquez sur un bouton qui définit l'option de sélection 

2) Aller à une autre page, où l'option de sélection est 

3) Sélectionnez cette option 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 des options de sélection. Notez que l'URL de la page contient? option = 1 ou 2) 

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

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


  3)  définissez la valeur d'option sélectionnée en fonction du bouton sur lequel vous avez cliqué 

<*>

 .. et ainsi de suite. 

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. 
GET['option']) && 
 Le moyen le plus simple si vous avez besoin de: 

1) Cliquez sur un bouton qui définit l'option de sélection 

2) Aller à une autre page, où l'option de sélection est 

3) Sélectionnez cette option 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 des options de sélection. Notez que l'URL de la page contient? option = 1 ou 2) 

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

<*>

  3)  définissez la valeur d'option sélectionnée en fonction du bouton sur lequel vous avez cliqué 

<*>

 .. et ainsi de suite. 

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. 
GET['option'] != "") {
$pg = 
 Le moyen le plus simple si vous avez besoin de: 

1) Cliquez sur un bouton qui définit l'option de sélection 

2) Aller à une autre page, où l'option de sélection est 

3) Sélectionnez cette option 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 des options de sélection. Notez que l'URL de la page contient? option = 1 ou 2) 

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

<*>

  3)  définissez la valeur d'option sélectionnée en fonction du bouton sur lequel vous avez cliqué 

<*>

 .. et ainsi de suite. 

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. 
GET['option'];              
} ?>

3) définissez la valeur d'option sélectionnée en fonction du bouton sur lequel vous avez cliqué

<*>

.. et ainsi de suite.
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.

Answer 10

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

Answer 11

Supposons que votre formulaire s'appelle formulaire1 :

.

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

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

Answer 13

Vous voulez probablement ceci:

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

OU

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

Answer 14

Si vous utilisez PHP, vous pouvez essayer quelque chose comme ceci:

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

J'ai bien peur de ne pas pouvoir tester cela pour le moment, mais jadis, je devais attribuer un identifiant à chaque étiquette d’option, puis j’ai fait quelque chose du genre:

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

Si cela ne fonctionne pas, peut-être que cela vous rapprochera d'une solution: P