it-swarm-eu.dev

Wie kann ich den Wert eines Auswahlfeldelements mithilfe von JavaScript programmgesteuert festlegen?

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>

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

355
brasskazoo
SelectElement("leaveCode", valueToSelect)

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

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

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

Dies wählt den _<option>_ mit dem Wert 14 aus.


Mit einfachem Javascript kann dies auch mit zwei Document Methoden erreicht werden:

  • Mit document.querySelector können Sie ein Element anhand eines CSS-Selektors auswählen:

    _document.querySelector('#leaveCode').value = '14'
    _
  • Wenn Sie den etablierteren Ansatz mit document.getElementById() verwenden, können Sie, wie der Name der Funktion impliziert, ein Element anhand seines id 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:

_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>_
103
Einar Ólafsson
function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);
28
Andrew Hedges

Keine Beantwortung der Frage, aber Sie können auch nach Index auswählen, wobei i der Index des Artikels ist, den Sie auswählen möchten:

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

Sie können die Elemente auch durchlaufen, um sie anhand des Anzeigewerts mit einer Schleife auszuwählen:

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

Ich habe die verschiedenen Methoden verglichen:

Vergleich der verschiedenen Möglichkeiten zum Festlegen eines Werts einer 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 einem Select 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 auf unserer Liste mit ~ 2000 Einträgen sehr schlecht abgeschnitten hat (sie hatten längere Texte zwischen den Optionen). Wir hatten ungefähr 2 s Verspätung nach einem val ()

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

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

Das sollte die Auswahl auf "Jahresurlaub" setzen

9
William

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

$("#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-Formularüberprüfung nicht ausgelöst wird. Obwohl die richtige Option ausgewählt wurde (und im Formular angezeigt wird), blieb die Eingabe ungültig ( ng-pristine und ng-ungültige Klassen noch vorhanden).

Um die AngularJS-Validierung zu erzwingen, rufen Sie nach Auswahl einer Option jQuery change () auf:

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

und

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

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

Der einfachste Weg, wenn Sie:
1) Klicken Sie auf eine Schaltfläche, die die Auswahloption definiert
2) Wechseln Sie zu einer anderen Seite, auf der die Auswahloption angezeigt wird
3) Lassen Sie diesen Optionswert auf einer anderen Seite auswählen

1) Ihre Schaltflächenlinks (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) Tragen Sie diesen Code auf Ihre zweite Seite ein (mein Fall contact.php)

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

) Auswahl des Optionswerts 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 Ausweise ... nur 3 Schritte und es funktioniert perfekt.

3
Lana

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;
}
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;
    }
  }
}
1
Milan Babuškov

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;
}
1
Robert Swisher

Das möchten Sie höchstwahrscheinlich:

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

OR

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