How to Select a Value in a Select Dropdown with JavaScript

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

Get selected value in dropdown list using JavaScript

Given a select element that looks like this:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

Running this code:

var e = document.getElementById("ddlViewBy");
var value = e.value;
var text = e.options[e.selectedIndex].text;

Results in:

value == 2
text == "test2"

Interactive example:

var e = document.getElementById("ddlViewBy");
function onChange() {
  var value = e.value;
  var text = e.options[e.selectedIndex].text;
  console.log(value, text);
}
e.onchange = onChange;
onChange();

<form>
  <select id="ddlViewBy">
    <option value="1">test1</option>
    <option value="2" selected="selected">test2</option>
    <option value="3">test3</option>
  </select>
</form>

Select dropdown menu option with javascript

Change the line that reads:

document.getElementById("stateSelect").selected = true;

to:

document.getElementById("stateSelect").selectedIndex = i;

JavaScript : How to get selected dropdown value?

Updated your code with a few pointers -

To add another option, say Cheese with multiplier of 2, you can just add the option in the HTML under the select element and add a new case in the switch statement as shown in the below code.
Have added the method weightConverter for the onChange of the select component for the case when user enters some value first in the input box and then decides to change their mind and change the value in the select component, it re-evaluates the Output after changing the option in the select component.

<select name="ingredients" id="ingredients" onChange="weightConverter()">
  <option value="flour">All Purpose Flour</option>
  <option value="sugar">Cane Sugar</option>
  <option value="cheese">Cheese</option>
</select>
<p>
  <label>Pounds:</label>
  <input id="inputPounds" type="number" placeholder="Pounds" oninput="weightConverter()">
</p>
<p>Ounces: <span id="outputOunces"></span></p>

<script>
  function weightConverter() {
    const dropDownValue = document.getElementById('ingredients').value;
    const valNum = document.getElementById('inputPounds').value;
    let multiplier = 0;
    switch (dropDownValue) {
      case 'flour':
        multiplier = 4.409245;
        break;
      case 'sugar':
        multiplier = 8.82;
        break;
      case 'cheese':
        multiplier = 2;
        break;
      default:
        break;
    }
    document.getElementById("outputOunces").innerHTML = valNum * multiplier;
  }
</script>

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>

HTML SELECT - Change selected option by VALUE using JavaScript

You can select the value using javascript:

document.getElementById('sel').value = 'bike';

DEMO

Select another dropdown value based on the previous dropdown selection

You can use javascript like this:

function Checker(el){

  const select = document.getElementById('counter');
  removeOptions(select);
  if(el.value == '4'){
    var option1 = document.createElement("option");
        option1.text = "Driveway";
        option1.value = "2";
        select.add(option1);
  }else{
    var option2 = document.createElement("option");
        option2.text = "Table Service";
        option2.value = "1";
        select.add(option2);
    var option1 = document.createElement("option");
        option1.text = "Driveway";
        option1.value = "2";
        select.add(option1);  

  }
}

function removeOptions(selectElement) {
                var i, L = selectElement.options.length - 1;
                for (i = L; i >= 0; i--) {
                    selectElement.remove(i);
                }
}

<div class="form-group col-md-12">
        <select name="service_type" id="service_type" class="form-control form-control-line" onChange="Checker(this)" required>
            <option value="" selected="selected" >Select Service</option>
            <option value="1">Dining</option>
            <option value="2">Beverages</option>
            <option value="3">Liquor</option>
            <option value="4">Takeout</option>
        </select>
    </div>

    <div class="form-group col-md-12">
        <select name="counter" id="counter" class="form-control form-control-line" required>
            <option value="" selected="selected" >Select Service Fist</option>

        </select>
    </div>