Comment définir par programmation la valeur d'un élément de zone de sélection à l'aide de JavaScript?

J'ai l' <select>élément HTML 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 leaveCodenombre comme paramètre, comment puis-je sélectionner l'option appropriée dans la liste?

Vous pouvez utiliser cette fonction:

selectElement('leaveCode', '11')

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

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

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

Cela sélectionnera <option>la valeur 14.

Avec du Javascript simple, cela peut également être réalisé avec deux Documentméthodes :

• Avec document.querySelector, vous pouvez sélectionner un élément basé sur un sélecteur CSS:

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

• En utilisant l'approche plus établie avec document.getElementById(), cela vous permettra, comme le nom de la fonction l'indique, de sélectionner un élément en fonction de son id:

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

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

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

Ne répondant 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 à 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;

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

Comparaison des différentes façons 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 comporté très mal sur notre liste avec environ 2000 entrées (ils avaient des textes plus longs entre les options). Nous avons eu environ 2 s de retard après un val ()

Remarque également: je fixe la valeur en fonction de la valeur réelle, pas de la valeur du texte.

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

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

J'ai essayé les solutions basées sur 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 élément <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 s'affiche dans le formulaire), l'entrée est restée invalide ( ng-vierge et ng-invalide classes 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();

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

La manière la plus simple si vous devez:
1) Cliquez sur un bouton qui définit l'option de sélection
2) Allez sur une autre page, où l'option de sélection est
3) Faites sélectionner la valeur de cette option sur une autre page

1) les liens de vos 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 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'];              
} ?>

3) sélectionnez la valeur de l'option, 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.
C'est donc un moyen facile de passer la valeur à une autre page (avec une liste d'options sélectionnée) via GET dans l'url. Pas de formulaires, pas d'identifiants .. juste 3 étapes et cela fonctionne parfaitement.

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

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

Supposons que votre formulaire soit nommé 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;
    }
  }
}

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

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

Vous le souhaitez très probablement:

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

OU

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

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

Je crains de ne pas pouvoir tester cela pour le moment, mais dans le passé, je pense que je devais donner à chaque étiquette d'option un ID, puis j'ai fait quelque chose comme:

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

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