Hoe stel ik programmatisch de waarde van een select box-element in met JavaScript?

February 10, 2022

Ik heb het volgende 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>

Hoe selecteer ik de juiste optie in de lijst met behulp van een JavaScript-functie met het leaveCode-nummer als parameter?

Antwoord 1, autoriteit 100%

U kunt deze functie gebruiken:

selectElement('leaveCode', '11')
function selectElement(id, valueToSelect) {    
    let element = document.getElementById(id);
    element.value = valueToSelect;
}

Antwoord 2, autoriteit 22%

Als u jQuery gebruikt, kunt u ook dit doen:

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

Hiermee wordt de <option>geselecteerd met de waarde 14.

Met gewoon Javascript kan dit ook worden bereikt met twee Documentmethoden:

Met document.querySelector, kunt u een element selecteren op basis van een CSS-selector:
```
document.querySelector('#leaveCode').value = '14'
```
De meer gevestigde aanpak gebruiken met document.getElementById(), waarmee u, zoals de naam van de functie aangeeft, een element kunt selecteren op basis van zijn id:
```
document.getElementById('leaveCode').value = '14'
```

U kunt de onderstaande code laten knippen om deze methoden en de jQuery-functie in actie te zien:

Antwoord 3, autoriteit 5%

function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);

Antwoord 4, autoriteit 3%

Geen antwoord op de vraag, maar u kunt ook selecteren op index, waarbij i de index is van het item dat u wilt selecteren:

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

U kunt ook door de items lopen om ze te selecteren op weergavewaarde met een lus:

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

Antwoord 5, autoriteit 3%

Ik heb de verschillende methoden vergeleken:

Vergelijking van de verschillende manieren om een waarde van een select in te stellen met JS of 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);
});

Uitvoer op een select met ~4000 elementen:

1 ms
58 ms
612 ms

Met Firefox 10. Opmerking: de enige reden dat ik deze test deed, was omdat jQuery superslecht presteerde op onze lijst met ~2000 items (ze hadden langere teksten tussen de opties).
We hadden ongeveer 2 s vertraging na een val()

Let ook op: ik stel de waarde in op de werkelijke waarde, niet op de tekstwaarde.

Antwoord 6, autoriteit 2%

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

Dat zou de selectie op “Jaarlijks verlof” moeten zetten

Antwoord 7, autoriteit 2%

Ik heb de bovenstaande op JavaScript/jQuery gebaseerde oplossingen geprobeerd, zoals:

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

en

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

in een AngularJS-app, waar een vereiste<select> element.

Geen van hen werkt, omdat de AngularJS-formuliervalidatie niet wordt geactiveerd. Hoewel de juiste optie is geselecteerd (en wordt weergegeven in het formulier), bleef de invoer ongeldig (klassen ng-pristineen ng-invalidnog aanwezig).

Om de Angularjs-validatie te forceren, bel dan JQuery wijzigen () na het selecteren van een optie:

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

en

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

Antwoord 8


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

Antwoord 9

de eenvoudigste manier als u:
1) Klik op een knop die Selecteer optie definieert
2) Ga naar een andere pagina, waarbij geselecteerde optie is
3) hebben die optiewaarde geselecteerd op een andere pagina

1) Uw knop Links (zeg, op de startpagina)

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

(Waar Contact.php is uw pagina met selecteer opties. Opmerking De pagina-URL heeft? Optie = 1 of 2)

2) Plaats deze code op uw tweede pagina (mijn zaak contact.php )

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

3) Maak de optiewaarde geselecteerd, afhankelijk van de knop geklikt

<select>
<option value="Sales" <? if ($pg == '1') { echo "selected"; } ?> >Sales</option>
<option value="IT" <? if ($pg == '2') { echo "selected"; } ?> >IT</option>
</select>

.. enzovoort.
Dit is dus een gemakkelijke manier om de waarde door te geven aan een andere pagina (met keuzelijst) via GET in url. Geen formulieren, geen ID’s.. slechts 3 stappen en het werkt perfect.

Antwoord 10

Stel dat uw formulier form1heet:

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

Antwoord 11

Zou zoiets moeten zijn:

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

Antwoord 12

kortste

Dit is een verbetering van de grootte van William answer

leaveCode.value = '14';

Antwoord 13

Waarom geen variabele toevoegen voor de ID van het element en er een herbruikbare functie van maken?

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

Antwoord 14

De meeste van de hier genoemde code werkte niet voor mij!

Eindelijk werkte dit

window.addEventListeneris belangrijk, anders wordt uw JS-code uitgevoerd voordat de waarden worden opgehaald in de Opties

   window.addEventListener("load", function () {
            // Selecting Element with ID - leaveCode  //
            var formObj = document.getElementById('leaveCode');
            // Setting option as selected
            let len;
            for (let i = 0, len = formObj.length; i < len; i++){
                if (formObj[i].value == '<value to show in Select>') 
                 formObj.options[i].selected = true;
            }
    });

Hopelijk helpt dit!

Antwoord 15

Als je PHP gebruikt, zou je zoiets als dit kunnen proberen:

$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>';

Antwoord 16

Je wilt waarschijnlijk dit:

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

of

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

Antwoord 17

Ik ben bang dat ik dit op dit moment niet kan testen, maar in het verleden geloof ik dat ik elke optie een ID moest geven, en toen deed ik zoiets als:

document.getElementById("optionID").select();

Als dat niet werkt, kan het je misschien dichter bij een oplossing krijgen: p

Previous articleDe grootte van alle tabellen in de database ophalen

Next articleHoe kan ik tekst vervangen door CSS?