HTML SELECT - Ändert die ausgewählte Option mit JavaScript um VALUE

73

In einer SELECT-Dropdown-Liste können viele Optionen enthalten sein.

<select id="sel">
    <option value="car">1</option>
    <option value="bike">2</option>
    <option value="cycle">3</option>
    ...
</select>

Ich erstelle eine Seite "Profil aktualisieren", auf der das Profil eines Benutzers aus der Datenbank abgerufen und ein Formular mit diesen Werten angezeigt wird. Wenn es um SELECTDropdown geht, gibt es viele Möglichkeiten. Es ist also mühsam, alle Werte zu testen

if (value == '1')
    echo "<option selected value='car'>1</option>";`

Daher möchte ich die entsprechende Option aus ihrem Wert auswählen. Wenn ich beispielsweise sel.value = 'bike'JavaScript verwende, sollte Option 2 ausgewählt werden.

javascript html html-select Dilip Raj Baral
quelle
2
Sind Sie sicher value="car"und der Text ist 1und nicht umgekehrt? Ist der <select>Code statisch oder wird er dynamisch aus einer Datenbank erstellt?
Freifaller
Sie möchten dies mit der Serverseite auswählen? Warum kein serverseitiges Tag?
Epascarello

Antworten:

115

Sie können den Wert mit Javascript auswählen:

document.getElementById('sel').value = 'bike';

DEMO

Michal Klouda
quelle
3
Denken Sie daran: Sie können sel.value = 'bicy' anstelle von document.getElementById ('sel') verwenden. Value
Eduardo Xavier
2
@EduardoXavier, wenn Sie zuerst 'var sel = document.getElementById (' sel ');' ausführen, können Sie dies. Sonst nein, das kannst du nicht. Wenn das Element nur hat id, besteht die einzige Möglichkeit darin, das Element zuerst abzurufen. Wenn es jedoch das nameAttribut hat und sich in einem Formular befindet, können Sie es verwenden formelement.sel.value. w3.org/TR/html5/forms.html#the-form-element und w3.org/TR/html5/forms.html#dom-form-nameditem
Denilson Sá Maia
3
@ DenilsonSá Bei dieser Frage geht es um die Verwendung der "id". Was Sie über Form und Namen gesagt haben, ist streng, aber Sie liegen völlig falsch, wenn Sie sagen, dass ich nicht auf die von mir vorgeschlagene Weise auf ein Element zugreifen kann. Lassen Sie uns dann etwas üben, schauen Sie sich hier jsfiddle.net/tub6f0Lg an : Prost !
Eduardo Xavier
1
@EduardoXavier: Ich stehe korrigiert, du hast recht! Vielen Dank für den Hinweis! :) w3.org/TR/html5/browsers.html#named-access-on-the-window-object Obwohl dies praktisch ist, kann es zu unordentlichem und unlesbarem Code führen, wenn IDs aufgrund von Fensterobjekten als globale Variablen verfügbar sind. Stellen Sie sich vor, ein anderer Entwickler (vielleicht sogar Sie selbst nach einer Weile) liest den Code.
Denilson Sá Maia
javascriptstutorial.com/blog/…
37

Wenn Sie jQuery verwenden:

$('#sel').val('bike');
Trevor
quelle
10

probier das aus ....

JSFIDDEL DEMO

mit Javascript

​document.getElementById('sel').value = 'car';​​​​​​​​​​

mit jQuery

$('#sel').val('car');
Vijay
quelle
1 
document.getElementById('drpSelectSourceLibrary').value = 'Seven';
Makyen
quelle