Ich habe das folgende HTML-Element "select":
<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 Zahl "leaveCode" als Parameter die entsprechende Option in der Liste aus?
Sie können diese Funktion verwenden:
selectElement('leaveCode', '11')
function selectElement(id, valueToSelect) {
let element = document.getElementById(id);
element.value = valueToSelect;
}
Wenn Sie jQuery verwenden, können Sie dies ebenfalls tun:
$('#leaveCode').val('14');
Dadurch wird die <Option>
mit dem Wert 14 ausgewählt.
Mit einfachem Javascript kann dies auch mit zwei [Dokument-
Methoden][1] erreicht werden:
document.querySelector
][2] können Sie ein Element basierend auf einem CSS-Selektor auswählen:document.querySelector('#leaveCode').value = '14'
document.getElementById()
][3] können Sie, wie der Name der Funktion impliziert, ein Element auf der Basis seiner id
auswählen:document.getElementById('leaveCode').value = '14'
Sie können den unten stehenden abgeschnittenen 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>
[1]: https://developer.mozilla.org/en-US/docs/Web/API/Document#Methods [2]: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector [3]: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
function setSelectValue (id, val) {
document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);
Das beantwortet zwar nicht die Frage, aber Sie können auch nach dem 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 auch mit einer Schleife durch die Elemente gehen, um nach dem 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;
Ich habe die verschiedenen Methoden verglichen:
Vergleich der verschiedenen Methoden, wie man einen Wert einer Auswahl mit JS oder jQuery setzt][1]
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. Anmerkung: Der einzige Grund, warum ich diesen Test gemacht habe, war, dass jQuery auf unserer Liste mit ~2000 Einträgen super schlecht abschnitt (sie hatten längere Texte zwischen den Optionen). Wir hatten etwa 2 s Verzögerung nach einem val()
Beachten Sie auch: Ich setze den Wert abhängig vom tatsächlichen Wert, nicht vom Textwert.
[1]:
Ich habe die oben genannten JavaScript/jQuery-basierten Lösungen ausprobiert, z.B:
$("#leaveCode").val("14");
und
var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
in einer AngularJS-Anwendung, in der es ein erforderliches <select> gab; Element vorhanden war.
Keines von ihnen funktioniert, da die AngularJS-Formularvalidierung nicht gefeuert wird. Obwohl die richtige Option ausgewählt wurde (und im Formular angezeigt wird), blieb die Eingabe ungültig (ng-pristine und ng-invalid Klassen sind immer noch vorhanden).
Um die AngularJS-Validierung zu erzwingen, rufen Sie nach Auswahl einer Option jQuery [change()][1] auf:
$("#leaveCode").val("14").change();
und
var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
$(leaveCode).change();
[1]: (1): https://api.jquery.com/change/
Der einfachste Weg, wenn Sie:
1) Ihre Button-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 Auswahlmöglichkeiten ist. Beachten Sie, dass die Seitenurl ?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) den Wert der gewählten Option 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 Select-Option-Liste) zu übergeben.
Keine Formulare, keine IDs..
nur 3 Schritte und es funktioniert perfekt.
Angenommen, Ihr Formular trägt den Namen 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;
}
}
}
Es 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;
}
Warum nicht eine Variable für das Element's Id hinzufügen und es zu einer wiederverwendbaren Funktion machen?
function SelectElement(selectElementId, valueToSelect)
{
var element = document.getElementById(selectElementId);
element.value = valueToSelect;
}
Sie wollen das höchstwahrscheinlich:
$("._statusDDL").val('2');
ODER
$('select').prop('selectedIndex', 3);
Wenn Sie PHP verwenden, könnten Sie so etwas versuchen:
$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 im Moment zu testen, aber in der Vergangenheit, ich glaube, ich hatte zu jeder Option Tag eine ID zu geben, und dann habe ich etwas wie:
document.getElementById("optionID").select();
Wenn das nicht funktioniert, kommt man so vielleicht einer Lösung näher :P