Comment modifier une option HTML sélectionnée à l'aide de JavaScript?


168

J'ai un menu d'options comme celui-ci:

<form name="AddAndEdit">
   <select name="list" id="personlist">
      <option value="11">Person1</option>
      <option value="27">Person2</option>
      <option value="17">Person3</option>
      <option value="10">Person4</option>
      <option value="7">Person5</option>
      <option value="32">Person6</option>
      <option value="18">Person7</option>
      <option value="29">Person8</option>
      <option value="28">Person9</option>
      <option value="34">Person10</option>
      <option value="12">Person11</option>
      <option value="19">Person12</option>
   </select>
</form>

Et maintenant, je veux changer l'option sélectionnée en utilisant un href. Par exemple:

<a href="javascript:void(0);"
  onclick="document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected';">change</a>

Mais je veux sélectionner l'option avec value=11 (Person1), non Person12.

Comment changer ce code?

Réponses:


209

Changement

document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected'

à

document.getElementById('personlist').value=Person_ID;

comment cela fonctionne-t-il avec plusieurs valeurs? Par exemple: document.getElementById('personlist').value=id1,id2ne fonctionnera pas, comment gérer cela?
utdev

1
@utdev voici une solution pour la sélection multiple stackoverflow.com/a/1296068/1251563 astuce: vous devez utiliser une boucle
breq

Donc je ne peux pas faire quelque chose comme .value = id1, id2ou.value = [array] ?
utdev

@utdev malheureusement non ... Vous devez utiliser une boucle
breq

Vous pouvez également obtenir de la valeur grâce à certaines options sans définir la classe comme var id = document.getElementById('personlist').value. J'ai utilisé une réponse différente, merci quand même!
Alper le

44

Outils en tant que code JavaScript pur pour la gestion de Selectbox:

Compréhension graphique:

Image - A

entrez la description de l'image ici


Image - B

entrez la description de l'image ici


Image - C

entrez la description de l'image ici

Mis à jour - 25-juin-2019 | DÉMO Fiddler

Code JavaScript:

/**
 * Empty Select Box
 * @param eid Element ID
 * @param value text
 * @param text text
 * @author Neeraj.Singh
 */
function emptySelectBoxById(eid, value, text) {
    document.getElementById(eid).innerHTML = "<option value='" + value + "'>" + text + "</option>";
}


/**
 * Reset Select Box
 * @param eid Element ID
 */

function resetSelectBoxById(eid) {
    document.getElementById(eid).options[0].selected = 'selected';
}


/**
 * Set Select Box Selection By Index
 * @param eid Element ID
 * @param eindx Element Index
 */

function setSelectBoxByIndex(eid, eindx) {
    document.getElementById(eid).getElementsByTagName('option')[eindx].selected = 'selected';
    //or
    document.getElementById(eid).options[eindx].selected = 'selected';
}


/**
 * Set Select Box Selection By Value
 * @param eid Element ID
 * @param eval Element Index
 */
function setSelectBoxByValue(eid, eval) {
    document.getElementById(eid).value = eval;
}


/**
 * Set Select Box Selection By Text
 * @param eid Element ID
 * @param eval Element Index
 */
function setSelectBoxByText(eid, etxt) {
    var eid = document.getElementById(eid);
    for (var i = 0; i < eid.options.length; ++i) {
        if (eid.options[i].text === etxt)
            eid.options[i].selected = true;
    }
}


/**
 * Get Select Box Text By ID
 * @param eid Element ID
 * @return string
 */

function getSelectBoxText(eid) {
    return document.getElementById(eid).options[document.getElementById(eid).selectedIndex].text;
}


/**
 * Get Select Box Value By ID
 * @param eid Element ID
 * @return string
 */

function getSelectBoxValue(id) {
    return document.getElementById(id).options[document.getElementById(id).selectedIndex].value;
}

1
Excellent exemple sur la façon d'interagir avec une sélection avec du javascript pur!
Mr.GT

Le lien vers "Fiddler Demo" donne maintenant 404 / Page non trouvée :-(
Genki

La question est "Comment modifier une option HTML sélectionnée à l'aide de JavaScript?". Il vous suffit de copier / coller un morceau de code sans rien répondre.
Thomas

28

Je pense que l'article de blog JavaScript Débutants - Sélectionnez une option de liste déroulante par valeur pourrait vous aider.

<a href="javascript:void(0);" onclick="selectItemByValue(document.getElementById('personlist'),11)">change</a>

function selectItemByValue(elmnt, value){

  for(var i=0; i < elmnt.options.length; i++)
  {
    if(elmnt.options[i].value === value) {
      elmnt.selectedIndex = i;
      break;
    }
  }
}

7
Vous devriez probablement breaksortir de votre boucle une fois que vous avez trouvé la valeur sélectionnée. Gain de temps si la liste est longue et que la valeur cible est l'une des premières.
daiscog le

21

Vous pouvez également modifier l'attribut DOM select.options.selectedIndex comme ceci:

function selectOption(index){ 
  document.getElementById("select_id").options.selectedIndex = index;
}
<p>
<select id="select_id">
  <option selected>first option</option>
  <option>second option</option>
  <option>third option</option>
</select>
</p>
<p>
  <button onclick="selectOption(0);">Select first option</button>
  <button onclick="selectOption(1);">Select second option</button>
  <button onclick="selectOption(2);">Select third option</button>
</p>


21
mySelect.value = myValue;

Où se mySelecttrouve votre zone de sélection et myValuela valeur à laquelle vous souhaitez la modifier.


Pourquoi tout le monde n'a-t-il pas voté, est-ce une nouvelle fonctionnalité? Cependant, je n'ai besoin que de prendre en charge les navigateurs récents.
antont

2

Vous pouvez également utiliser JQuery

$(document).ready(function () {
  $('#personlist').val("10");
}

1
Ou, sans requête, la sauvegarde d' un tas de frais généraux inutiles, document.querySelector('#personlist').value=10;.
Manngo

2

Si vous ajoutez l'option avec javascript

function AddNewOption(userRoutes, text, id) 
{
    var option = document.createElement("option");
    option.text = text;
    option.value = id;
    option.selected = "selected";
    userdRoutes.add(option);
}

Je pense que la question était "Comment modifier une option HTML sélectionnée à l'aide de JavaScript?"
Manngo

1

Un tableau Index commencera à 0. Si vous voulez value = 11 (Person1), vous l'obtiendrez avec la position getElementsByTagName('option')[10].selected.


0

C'est un ancien post, mais si quelqu'un cherche encore une solution à ce genre de problème, voici ce que j'ai trouvé:

<script>
  document.addEventListener("DOMContentLoaded", function(e) {
    document.forms['AddAndEdit'].elements['list'].value = 11;
  });
</script>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.