How to Programmatically Set the Value of a Select Box Element Using JavaScript

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>

How to change a select value from JavaScript

Setting .value to the value of one of the options works on all vaguely-current browsers. On very old browsers, you used to have to set the selectedIndex:

document.getElementById("select").selectedIndex = 0;

If neither that nor your original code is working, I wonder if you might be using IE and have something else on the page creating something called "select"? (Either as a name or as a global variable?) Because some versions of IE have a problem where they conflate namespaces. Try changing the select's id to "fluglehorn" and if that works, you know that's the problem.

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

Programmatically choose item in select drop down

First get a handle on that select somehow:

var select = document.getElementsByTagName("SELECT")[0];

Then manipulate the selectedIndex property (I believe it's a zero-based index):

select.selectedIndex = 1;

How to add Drop-Down list (select) programmatically?

This will work (pure JS, appending to a div of id myDiv):

Demo: http://jsfiddle.net/4pwvg/

var myParent = document.body;
//Create array of options to be addedvar array = ["Volvo","Saab","Mercades","Audi"];
//Create and append select listvar selectList = document.createElement("select");selectList.id = "mySelect";myParent.appendChild(selectList);
//Create and append the optionsfor (var i = 0; i < array.length; i++) {    var option = document.createElement("option");    option.value = array[i];    option.text = array[i];    selectList.appendChild(option);}

How do I programatically select an HTML option using JavaScript?

Change

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

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

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>

Programmatically set the text of a select - jquery

Check out this answer.

You can use that filter to check the inner text and then you put the selected attribute like this:

.attr("selected", true);

Example I tested it with:

$(function() {
    $("#select").find("option").filter(function() {
        return this.innerHTML == "InnerText";
    }).attr("selected", true);
})

How to select a value in a select dropdown with JavaScript?

Use the selectedIndex property:

document.getElementById("Mobility").selectedIndex = 12; //Option 10

Alternate method:

Loop through each value:

//Get select object
var objSelect = document.getElementById("Mobility");

//Set selected
setSelectedValue(objSelect, "10");

function setSelectedValue(selectObj, valueToSet) {
    for (var i = 0; i < selectObj.options.length; i++) {
        if (selectObj.options[i].text== valueToSet) {
            selectObj.options[i].selected = true;
            return;
        }
    }
}