html select – Get selected value in dropdown list using JavaScript

html select – Get selected value in dropdown list using JavaScript

If you have 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 strUser = e.value;

Would make strUser be 2. If what you actually want is test2, then do this:

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

Which would make strUser be test2

Plain JavaScript:

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

jQuery:

$(#elementId :selected).text(); // The text content of the selected option
$(#elementId :selected).val(); // The value of the selected option

AngularJS: (http://jsfiddle.net/qk5wwyct):

// HTML
<select ng-model=selectItem ng-options=item as item.text for item in items>
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// JavaScript
$scope.items = [{
  value: item_1_id,
  text: Item 1
}, {
  value: item_2_id,
  text: Item 2
}];

html select – Get selected value in dropdown list using JavaScript

var strUser = e.options[e.selectedIndex].value;

This is correct and should give you the value.
Is it the text youre after?

var strUser = e.options[e.selectedIndex].text;

So youre clear on the terminology:

<select>
    <option value=hello>Hello World</option>
</select>

This option has:

• Index = 0
• Value = hello
• Text = Hello World