Wie kann ich programmatisch den Wert eines Select-Box-Element mit Hilfe von JavaScript eingestellt?
-
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?
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 seinerid
: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
Keiner von ihnen arbeitet, weil die AngularJS Formular-Validierung nicht ausgelöst wird. Obwohl die richtige Option ausgewählt wurde (und wird in der Form angezeigt), der Eingang blieb ungültig ( ng-pristine und ng-invalid Klassen noch vorhanden).
Um die AngularJS Validierung zu erzwingen, rufen jQuery Änderung () nach Auswahl einer Option:
$("#leaveCode").val("14").change();
und
var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
$(leaveCode).change();
function foo(value)
{
var e = document.getElementById('leaveCode');
if(e) e.value = value;
}
Der einfachste Weg, wenn Sie benötigen:
1) Klicken Sie auf eine Schaltfläche, die wählen Sie die Option definiert
2) Gehen Sie auf eine andere Seite, wo wählen Sie die Option ist
3) Haben Sie diese Option Wert auf einer anderen Seite ausgewählt
1) Ihre Taste Links (zum Beispiel 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 ist Ihre Seite mit ausgewählten Optionen. Beachten Sie die Seiten-URL hat? Option = 1 oder 2)
2) setzen diesen Code auf Ihrer zweiten Seite (mein Fall contact.php )
<?
if (isset($_GET['option']) && $_GET['option'] != "") {
$pg = $_GET['option'];
} ?>
3) die Option Wert machen ausgewählt, auf die Schaltfläche geklickt je
<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.
Das ist also eine einfache Möglichkeit, den Wert auf einem anderen Seite vorbei (mit ausgewählter Optionsliste) über GET in URL. Keine Formulare, keine IDs .. nur 3 Schritten und es funktioniert perfekt.
Warum nicht noch eine Variable für das Element der Id und eine wiederverwendbare Funktion machen?
function SelectElement(selectElementId, valueToSelect)
{
var element = document.getElementById(selectElementId);
element.value = valueToSelect;
}
Angenommen, Ihre Form ist der Name form1 :
function selectValue(val)
{
var lc = document.form1.leaveCode;
for (i=0; i<lc.length; i++)
{
if (lc.options[i].value == val)
{
lc.selectedIndex = i;
return;
}
}
}
Sollte etwas in dieser 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;
}
Sie höchstwahrscheinlich wollen dies:
$("._statusDDL").val('2');
oder
$('select').prop('selectedIndex', 3);
Wenn PHP verwenden Sie so etwas wie dies versuchen könnte:
$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>';
Ich fürchte, ich bin nicht in der Lage dies zur Zeit zu testen, aber in der Vergangenheit, ich glaube, ich hatte jeder Option Tag eine ID zu geben, und dann habe ich so etwas wie:
document.getElementById("optionID").select();
Wenn das nicht funktioniert, vielleicht wird es Sie näher an einer Lösung erhalten: P