Wie setze ich den Wert eines Auswahlfeldelements mithilfe von JavaScript programmgesteuert?

420

Ich habe das folgende HTML- <select>Element:

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

leaveCodeWie wähle ich unter Verwendung einer JavaScript-Funktion mit der Nummer als Parameter die entsprechende Option in der Liste aus?

Brasskazoo
quelle
siehe meine Antwort für einen Vergleich der Leistung für verschiedene Methoden
Toskan

Antworten:

532

Sie können diese Funktion verwenden:

selectElement('leaveCode', '11')

function selectElement(id, valueToSelect) {    
    let element = document.getElementById(id);
    element.value = valueToSelect;
}
Mitchel Sellers
quelle
4
Gute Antwort, dies ist viel einfacher als das Durchlaufen der Optionen. Und es ist standardkonform: dev.w3.org/html5/spec/… . Wenn es Browser-Inkompatibilitäten gibt (natürlich gibt es :) :) Ich wäre sehr interessiert zu wissen, was sie sind. Das ist die Art von Dingen, für die Sie normalerweise auf ppk zählen, aber er weigert sich hartnäckig, bei meinen Suchen nach diesem Thema aufzutauchen.
Philo
9
Und was ist mit Mehrfachauswahl? Dies scheint bei mehreren Optionen nicht zu funktionieren (zumindest in Chrome 25).
Georgii Ivankin
2
Wie @ ring0 hervorhob, wird ein leerer Eintrag in Chrome eingefügt, wenn valueToSelect nicht vorhanden ist. Während IE und Firefox den zuletzt ausgewählten Wert beibehalten.
Karthik Bose
1
Hinweis für IE: Die <Option> muss das Attribut value = 'valueToSelect' haben. Sie können den Anzeigetext innerhalb der <Option> .. </ Option> nicht als Wert verwendenToSelect
Peter Quiring
4
Wenn das Änderungsereignis ausgelöst werden soll, sollten Sie auch element.dispatchEvent(new Event('change'));
Folgendes
120

Wenn Sie jQuery verwenden, können Sie dies auch tun:

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

Dadurch wird die <option>mit dem Wert 14 ausgewählt.


Mit einfachem Javascript kann dies auch mit zwei DocumentMethoden erreicht werden :

  • Mit document.querySelectorkönnen Sie ein Element basierend auf einem CSS-Selektor auswählen:

    document.querySelector('#leaveCode').value = '14'
  • Wenn Sie den etablierteren Ansatz mit verwenden document.getElementById(), können Sie, wie der Name der Funktion andeutet, ein Element anhand seiner idfolgenden Elemente auswählen :

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

Sie können den folgenden Code ausführen, um diese Methoden und die jQuery-Funktion in Aktion zu sehen:

Einar Ólafsson
quelle
4
Dies kann auch für die Mehrfachauswahl verwendet werden. Übergeben Sie einfach ein Array von Zeichenfolgen anstelle einer einzelnen Zeichenfolge an die Funktion 'val'. Siehe: stackoverflow.com/a/16583001/88409
Triynko
Gibt es eine Möglichkeit, auf diese Weise auch $ ('# LeaveCode'). On ('change', function () auszulösen?
Lieuwe
5
$ ("# LeaveCode"). val ("14"). change ();
Loren
29
function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);
Andrew Hedges
quelle
16

Sie beantworten die Frage nicht, können aber auch nach Index auswählen, wobei i der Index des Elements ist, das Sie auswählen möchten:

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

Sie können die Elemente auch durchlaufen, um sie mit einer Schleife nach Anzeigewert auszuwählen:

for (var i = 0, len < formObj.leaveCode.length; i < len; i++) 
    if (formObj.leaveCode[i].value == 'xxx') formObj.leaveCode[i].selected = true;
Chase Seibert
quelle
4
Sollte nicht formObj.leaveCode [i] .selected = true sein; sei formObj.options [i] .selected = true; ?
David Christopher Reynolds
14

Ich habe die verschiedenen Methoden verglichen:

Vergleich der verschiedenen Möglichkeiten zum Festlegen eines Wertes für eine Auswahl mit JS oder 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);
});

Ausgabe auf einer Auswahl mit ~ 4000 Elementen:

  • 1 ms
  • 58 ms
  • 612 ms

Mit Firefox 10. Hinweis: Der einzige Grund, warum ich diesen Test durchgeführt habe, war, dass jQuery mit ~ 2000 Einträgen auf unserer Liste sehr schlecht abschnitt (sie hatten längere Texte zwischen den Optionen). Wir hatten ungefähr 2 s Verzögerung nach einem val ()

Beachten Sie auch: Ich stelle den Wert abhängig vom tatsächlichen Wert ein, nicht vom Textwert.

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

Das sollte die Auswahl auf "Jahresurlaub" setzen.

Wilhelm
quelle
9

Ich habe die oben genannten JavaScript / jQuery-basierten Lösungen ausprobiert, z.

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

und

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

in einer AngularJS-App, in der ein erforderliches <select> -Element vorhanden war.

Keiner von ihnen funktioniert, da die AngularJS-Formularvalidierung nicht ausgelöst wird. Obwohl die richtige Option ausgewählt wurde (und im Formular angezeigt wird), blieb die Eingabe ungültig ( ng-makellose und ng-ungültige Klassen sind noch vorhanden).

Um die AngularJS-Validierung zu erzwingen, rufen Sie jQuery change () auf, nachdem Sie eine Option ausgewählt haben:

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

und

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
$(leaveCode).change();
lumi77
quelle
Warum jQuery dafür verwenden, wenn Sie dies bereits mit Angular tun können? Wenn Sie Angular selbst verwenden, können Sie den Wert nicht festlegen. Die integrierte Unterstützung für das Auslösen der Änderung (Keine Ahnung, ich verwende React, habe diesen Beitrag erst nach 5 Sekunden bei Google gefunden: stackoverflow.com/questions/). 50302062 /… )? Denn das würde bedeuten, dass Sie Angular nicht mit einer zusätzlichen ± 30kb Bibliothek "nur dafür"
herumhacken müssen
3

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

mmattax
quelle
3

Der einfachste Weg, wenn Sie Folgendes benötigen:
1) Klicken Sie auf eine Schaltfläche, die die Auswahloption definiert.
2) Wechseln Sie zu einer anderen Seite, wobei die Auswahloption
3 ist.) Lassen Sie diesen Optionswert auf einer anderen Seite auswählen

1) Ihre Schaltflächen-Links (z. B. auf der Startseite)

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

(wobei contact.php Ihre Seite mit ausgewählten Optionen ist. Beachten Sie, dass die Seiten-URL? option = 1 oder 2 hat.)

2) Setzen Sie diesen Code auf Ihre zweite Seite (mein Fall contact.php )

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

3) Wählen Sie den Optionswert abhängig von der angeklickten Schaltfläche

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

.. und so weiter.
Dies ist also eine einfache Möglichkeit, den Wert über GET in url an eine andere Seite (mit Auswahloptionsliste) zu übergeben. Keine Formulare, keine IDs ... nur 3 Schritte und es funktioniert perfekt.

Lana
quelle
1

Warum nicht eine Variable für die ID des Elements hinzufügen und es zu einer wiederverwendbaren Funktion machen?

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

Angenommen, Ihr Formular heißt 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;
    }
  }
}
Milan Babuškov
quelle
1

Sollte etwas in diese Richtung sein:

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;
}
Stephen Wrighton
quelle
0
function selecetElement() {
 var selectedValue = document.getElementById('leaveCode');
 selectedValue.value = "11";
}
Partha Mukherjee
quelle
2
Wenn Sie eine Antwort auf eine elf Jahre alte Frage mit 16 vorhandenen Antworten hinzufügen, ist es sehr wichtig, darauf hinzuweisen, welchen neuen Aspekt der Frage Ihre Antwort anspricht. Wenn Sie dies nicht tun und Ihre Änderung subtil ist, wird sie möglicherweise übersehen und Ihre Antwort als spätes Duplikat entfernt. Nur-Code-Antworten können fast immer verbessert werden, indem erklärt wird, wie und warum sie funktionieren.
Jason Aller
-1

Wenn Sie PHP verwenden, können Sie Folgendes ausprobieren:

$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>';
almyz125
quelle
-1

Sie möchten höchstwahrscheinlich Folgendes:

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

ODER

$('select').prop('selectedIndex', 3); 
Makyen
quelle
8
Dies setzt jedoch voraus, dass das OP JQuery verwendet
Barry Michael Doyle
2
@BarryMichaelDoyle, was nicht ist, denn selbst der Titel der Fragen endet mit using JavaScript.
Iulian Onofrei
-6

Ich fürchte, ich kann das momentan nicht testen, aber in der Vergangenheit musste ich jedem Options-Tag eine ID geben, und dann habe ich etwas getan wie:

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

Wenn das nicht funktioniert, kommen Sie vielleicht einer Lösung näher: P.

Lucas Oman
quelle
3
Das HTMLOptionElement verfügt nicht über eine select()Methode (es werden keine zusätzlichen Methoden über den für alle HTML-Elemente festgelegten Standard definiert). Sie können die selectedEigenschaft jedoch auf true setzen.
MrWhite