html - Hur sätter jag programmatiskt värdet på ett select-box-element med JavaScript?

Jag har följande 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>

Med en JavaScript-funktion med leaveCode-numret som parameter, hur väljer jag det lämpliga alternativet i listan?

Svar #1

Du kan använda den här funktionen:

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

selectElement('leaveCode', '11');
<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>

Om du vill utlösa onchange-händelsen också, kan du valfritt använda:

element.dispatchEvent(new Event('change'))

Svar #2

Om du använder jQuery kan du också göra så här:

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

Detta kommer att välja <option> med värdet 14.

Med vanlig Javascript kan detta också uppnås med två Document-metoder:

  • Med document.querySelector kan du välja ett element baserat på en CSS-väljare:

    document.querySelector('#leaveCode').value = '14'

  • Genom att använda det mer etablerade tillvägagångssättet med document.getElementById(), kommer det, som funktionen antyder, att låta dig välja ett element baserat på dess id:

    document.getElementById('leaveCode').value = '14'

Du kan köra koden nedan för att se dessa metoder och jQuery-funktionen i aktion:

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>

Svar #3

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

Svar #4

Svarar inte på frågan, men du kan också välja efter index, där i är indexet för objektet du vill välja:

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

Du kan också iterera genom objekten för att välja efter visningsvärde med en loop:

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

Svar #5

Kort

Detta är storleksförbättring av Williams svar

leaveCode.value = '14';


leaveCode.value = '14';
<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>

Svar #6

Jag jämförde de olika metoderna:

Jämförelse av de olika sätten att sätta ett värde på en select med JS eller jQuery

kod :

$(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);
});

Utdata på ett urval med ~4000 element:

  • 1 ms
  • 58 ms
  • 612 ms

Med Firefox 10. Obs: Den enda anledningen till att jag gjorde detta test var för att jQuery presterade mycket dåligt på vår lista med ~2000 poster (de hade längre texter mellan alternativen). Vi hade ungefär 2 s fördröjning efter en val()

Notera också: Jag anger värdet beroende på det verkliga värdet, inte textvärdet.

Svar #7

Jag försökte de ovanstående JavaScript/jQuery-baserade lösningarna, såsom:

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

och

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

i en AngularJS-app, där det fanns ett obligatoriskt <select>-element.

Ingen av dem fungerar, eftersom AngularJS-formulärvalideringen inte aktiveras. Även om rätt alternativ valdes (och visas i formuläret), förblev inmatningen ogiltig (ng-pristine och ng-invalid klasser är fortfarande närvarande).

För att tvinga AngularJS-valideringen, kalla på jQuery change() efter att ha valt ett alternativ:

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

och

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

Svar #8

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

Det borde sätta markeringen på "Årlig ledighet"

Relaterade artiklar