Wie kann ich programmatisch den Wert eines Select-Box-Element mit Hilfe von JavaScript eingestellt?

StackOverflow https://stackoverflow.com/questions/78932

  •  09-06-2019
  •  | 
  •  

Frage

Ich habe folgendes 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>

eine JavaScript-Funktion mit der leaveCode Nummer als Parameter verwenden, wie kann ich die entsprechende Option in der Liste?

War es hilfreich?

Lösung 

SelectElement("leaveCode", valueToSelect)

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

Andere Tipps

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

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

Dies wird den <option> mit dem Wert von 14 aus.

Mit einem normalen Javascript, kann dies auch mit zwei erreicht werden Document Methoden :

  • Mit document.querySelector , Sie ein Element auswählen, basierend auf einem CSS-Selektor kann: 

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

  • den etablierten Ansatz mit document.getElementById() , das wird, wie der Name der Funktion schon sagt, können Sie ein Element auswählen, basierend auf seiner id: 

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

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

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

beantwortet die Frage nicht, aber Sie können auch durch den Index auswählen, wobei i der Index des Elements ist es, Sie möchten wählen: 

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

Sie können auch eine Schleife durch die Elemente von Anzeigewert mit einer Schleife wählen: 

for (var i = 0, len < formObj.leaveCode.length; i < len; i++) 
    if (formObj.leaveCode[i].value == 'xxx') formObj.leaveCode[i].selected = true;

Ich verglich die verschiedenen Methoden:

Vergleich der verschiedenen Möglichkeiten auf, wie ein Wert einer Auswahl mit JS setzen 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 tat, war, weil jQuery ausgeführt Super schlecht auf unserer Liste mit ~ 2000 Einträge (sie zwischen den Optionen längere Texte hatte). Wir hatten etwa 2 s Verzögerung nach einem val ()

Hinweis auch: I-Wert setze auf dem realen Wert abhängig, nicht der Text-Wert 

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

Das sollte die Auswahl auf „Jahresurlaub“

Ich habe versucht, die oben JavaScript / jQuery-basierten Lösungen, wie zum Beispiel: 

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

und 

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

in einer AngularJS app, wo es ein erforderlich

Der Inhalt ist unter Creative Commons lizenziert.

Wenn Sie Urheberrechtsverletzungen finden, können Sie uns unter uns kontaktieren info@generacodice.com um die Entfernung des Inhalts zu beantragen.

scroll top