Get Selected Value in Dropdown List Using JavaScript

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>

How to get selected value from Dropdown list in JavaScript

It is working fine with me.

I have the following HTML:

<div>
    <select id="select1">
        <option value="1">test1</option>
        <option value="2" selected="selected">test2</option>
        <option value="3">test3</option>
    </select>
    <br/>
    <button onClick="GetSelectedItem('select1');">Get Selected Item</button>
</div>

And the following JavaScript:

function GetSelectedItem(el)
{
    var e = document.getElementById(el);
    var strSel = "The Value is: " + e.options[e.selectedIndex].value + " and text is: " + e.options[e.selectedIndex].text;
    alert(strSel);
}

See that you are using the right id. In case you are using it with ASP.NET, the id changes when rendered.

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>

Get selected option text with JavaScript

Try options

function myNewFunction(sel) {  alert(sel.options[sel.selectedIndex].text);}

<select id="box1" onChange="myNewFunction(this);">  <option value="98">dog</option>  <option value="7122">cat</option>  <option value="142">bird</option></select>

How to get selected value from dropdown in Javascript

You have a simple typo. It's getElementById, not GetElementById.

Get Selected value from dropdown using JavaScript

Maybe it's the comma in your if condition.

function answers() {
var answer=document.getElementById("mySelect");
 if(answer[answer.selectedIndex].value == "To measure time.") {
  alert("That's correct!"); 
 }
}

You can also write it like this.

function answers(){
 document.getElementById("mySelect").value!="To measure time."||(alert('That's correct!'))
}

Get selected value of dropdown

This will give you the value of the selected item:

quantity = document.querySelector(".quantityDropdown select").value;

However if you want the actual content of the selected item (i.e. the text shown) outside of the option tag, use:

var quantity = document.querySelector(".quantityDropdown select")[document.querySelector(".quantityDropdown select").selectedIndex].innerHTML;