Wie ändere ich eine ausgewählte HTML-Option mit JavaScript?

167

Ich habe ein Optionsmenü wie das folgende:

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

Und jetzt möchte ich die ausgewählte Option mit einem href ändern. Beispielsweise:

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

Aber ich möchte die Option mit value=11 (Person1)nicht auswählen Person12.

Wie ändere ich diesen Code?

breq
quelle

Antworten:

208

Veränderung

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

zu

document.getElementById('personlist').value=Person_ID;
breq
quelle
Wie funktioniert das mit mehreren Werten? Zum Beispiel: document.getElementById('personlist').value=id1,id2funktioniert nicht, wie geht das?
Udev
1
@utdev hier ist eine Lösung für die Mehrfachauswahl von stackoverflow.com/a/1296068/1251563 Tipp: Sie müssen eine Schleife verwenden
breq
Also kann ich so etwas nicht machen .value = id1, id2oder .value = [array]?
Udev
@utdev leider nein ... Sie müssen eine Schleife verwenden
breq
Sie können auch Wert durch ausgewählte Optionen erhalten, ohne die Klasse wie zu setzen var id = document.getElementById('personlist').value. Ich habe in einer anderen Antwort verwendet, trotzdem danke!
Alper
44

Tools als reiner JavaScript-Code für den Umgang mit Selectbox:

Grafisches Verständnis:

Bild - A.

Geben Sie hier die Bildbeschreibung ein


Bild - B.

Geben Sie hier die Bildbeschreibung ein


Bild - C.

Geben Sie hier die Bildbeschreibung ein

Aktualisiert - 25. Juni 2019 | Fiddler DEMO

JavaScript-Code:

/**
 * 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;
}
Neeraj Singh
quelle
1
Tolles Beispiel für die Interaktion mit einem Select mit reinem Javascript!
Mr.GT
Link zu "Fiddler Demo" führt jetzt zu 404 / Seite nicht gefunden :-(
Genki
Die Frage lautet "Wie ändere ich eine ausgewählte HTML-Option mit JavaScript?". Sie kopieren / fügen einfach einen Code ein, ohne nichts zu beantworten.
Thomas
27

Ich glaube, dass der Blog-Beitrag JavaScript-Anfänger - Wählen Sie eine Dropdown-Option nach Wert, könnte Ihnen helfen.

<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;
    }
  }
}
Nick
quelle
7
Sie sollten wahrscheinlich breakaus Ihrer Schleife herauskommen, sobald Sie den ausgewählten Wert gefunden haben. Spart Zeit, wenn die Liste lang ist und der Zielwert einer der ersten ist.
Daiscog
21

Sie können das DOM-Attribut select.options.selectedIndex auch folgendermaßen ändern:

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>

Caspinos
quelle
20
mySelect.value = myValue;

Wo mySelectbefindet sich Ihr Auswahlfeld und in myValuewelchen Wert möchten Sie es ändern?

Ronnie Royston
quelle
Warum haben nicht alle darüber abgestimmt, ist das eine neue Funktion? Ich muss jedoch nur die neuesten Browser unterstützen, um dies trotzdem zu tun.
Antont
2

Sie können JQuery auch verwenden

$(document).ready(function () {
  $('#personlist').val("10");
}
Sunil Yaduvanshi
quelle
1
Oder ohne Abfrage eine ganze Menge unnötigen Overheads zu sparen document.querySelector('#personlist').value=10;.
Manngo
1

Ein Array-Index beginnt bei 0. Wenn Sie den Wert = 11 (Person1) möchten, erhalten Sie ihn mit der Position getElementsByTagName('option')[10].selected.

Rachana
quelle
1

Wenn Sie die Option mit Javascript hinzufügen

function AddNewOption(userRoutes, text, id) 
{
    var option = document.createElement("option");
    option.text = text;
    option.value = id;
    option.selected = "selected";
    userdRoutes.add(option);
}
Frank M.
quelle
Ich denke, die Frage war: "Wie ändere ich eine ausgewählte HTML-Option mit JavaScript?"
Manngo
0

Es ist ein alter Beitrag, aber wenn noch jemand nach einer Lösung für diese Art von Problem sucht, habe ich mir Folgendes ausgedacht:

<script>
  document.addEventListener("DOMContentLoaded", function(e) {
    document.forms['AddAndEdit'].elements['list'].value = 11;
  });
</script>
Tariqul Islam
quelle