How to Programatically Select an HTML Option Using JavaScript

How do I programatically select an HTML option using JavaScript?

Change

document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected'

to

document.getElementById('personlist').value=Person_ID;

How do I programmatically set the value of a select box element using JavaScript?

You can use this function:

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>

Select option from a select using JavaScript

You can get the options, loop and check the value

let select = document.getElementById("id");
for (let i = 0; i < select.options.length; i++) {
    if (select.options[i].value == "two") {
        select.selectedIndex = i;
        break;
    }
}

Demo: https://jsfiddle.net/ghyx623m/

how to choose with javascript a select option html

Change your HTML to this;

<select id="color">
    <option value="red">red</option>
    <option value="yellow">yellow</option>
    <option value="green">green</option>
    <option value="orange">orange</option>
</select>

Then the following JavaScript should work;

var color = "green"
document.getElementById("color").value = color;

A snippet as an example;

var color = "green"
document.getElementById("color").value = color;
console.log( document.getElementById("color").value );

<select id="color">
    <option value="red">red</option>
    <option value="yellow">yellow</option>
    <option value="green">green</option>
    <option value="orange">orange</option>
</select>

How to programmatically change the selected option in an html select tag

on select all you have to do is to set ngModel attribute and then you can change variable value to set value.

<select #priceRangeOptions [(ngModel)]="selectedValue" class="custom-select" id="inputGroupSelect01">
 <option *ngFor="let priceRange of priceRangeOptions; let i=index"
 id="selectedPriceRange" [value]="i">{{priceRange}}</option>
</select>

selectedValue = 'my selected value.';

or you can use javascript to do that

document.getElementById('inputGroupSelect01').value = "value";

How to programmatically select an option inside a variable using jQuery

You can cast the HTML into a jQuery element and select the value at index 0. Then you can add it to the DOM.

Here is a simple jQuery plugin to select an option by index.

(function($) {  $.fn.selectOptionByIndex = function(index) {    this.find('option:eq(' + index  + ')').prop('selected', true);    return this;  };  $.fn.selectOptionByValue = function(value) {    return this.val(value);  };  $.fn.selectOptionByText = function(text) {    this.find('option').each(function() {      $(this).attr('selected', $(this).text() == text);                                     });    return this;  };})(jQuery);
var $html = $([  '<select>',    '<option value="10">10</option>',    '<option value="20">20</option>',  '</select>'].join(''));
$('#select-handle').append($html.selectOptionByIndex(0));// or$html.selectOptionByValue(10);// or$html.selectOptionByText('10');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="select-handle"></div>

selecting an option on dropdown select programmatically

If you're using Select2, you can update your selection via

$("#walkForAmount").select2("val", "5"); // select "5"

Example: http://jsfiddle.net/verashn/aWvQr/1/

---

Related Topics