[Solved-5 Solutions]Get the selected value from a dropdown list using JavaScript - JavaScript Tutorial


How to get the selected value from a dropdown list using JavaScript ?

Solution 1:

  • HTML consists of an HTML Select DropDownList and a Button. The HTML Button has been assigned a JavaScript OnClick event handler.
  • When the Button is clicked, the GetSelectedTextValue JavaScript function is executed.
  • In this function, the HTML Select DropDownList object is referenced and then the selected Text and Value is determined and displayed using JavaScript alert message box.
Select Colors:
<select id="wikitechyColors">
    <option value=""></option>
    <option value="1">RED</option>
    <option value="2">GREEN</option>
    <option value="3">BLUE</option>
<input type="button" value="Get Selected Text Value" onclick="GetSelectedTextValue()" />
<script type="text/javascript">
    function GetSelectedTextValue() {
        var wikitechyColors = document.getElementById("");
        var selectedText = .options[.selectedIndex].innerHTML;
        var selectedValue = .value;
        alert("Selected Text: " + selectedText + " Value: " + selectedValue);

Solution 2:

If we have a select element that looks like this:

<select id="Wikitechy_Tutorial">
  <option value="1">HTML</option>
  <option value="2" selected="selected">CSS</option>
  <option value="3">JAVASCRIPT</option>

Running this code:

var e = document.getElementById("Wikitechy_Tutorial");
var strUser = e.options[e.selectedIndex].value;

We would make strUser be 3. If what we actually want is JAVASCRIPT, then do this:

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

Solution 3:


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


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


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

$scope.items = [{
  value: 'item_1_id',
  text: 'Item 1'
}, {
  value: 'item_2_id',
  text: 'Item 2'

Solution 4:

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

This is correct and should give us the value.

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

So we can use this terminology,

    <option value="1">Wikitechy</option>

This option has:

    Index = 0
    Value = 1
    Text = Wikitechy

Solution 5:

The following sample code is related to getting/putting of values from input/select fields using JavaScript.

 <select id="Wikitechy_Tutorial" onchange="run()">  <!--Call run() function-->
     <option value="1">Select</option>
     <option value="2">text1</option>
     <option value="3">text2</option>
     <option value="4">text3</option>
<input type="text" id="xyz" placeholder="get value on option select"><br>
<input type="text" id="abc"  placeholder="Write Something !" onkeyup="up()">

The following script is getting the value of the selected option and putting it in text box 1

    function run() {
        document.getElementById("xyz").value = document.getElementById("Wikitechy_Tutorial").value;

The following script is getting a value from a text box 2 and alerting with its value

    function up() {
        //if (document.getElementById("xyz").value != "") {
            var dop = document.getElementById("xyz").value;

The following script is calling a function from a function

    function up() {
        var dop = document.getElementById("xyz").value;
        pop(dop); // Calling function pop

    function pop(val) {

Related Searches to javascript tutorial - Get the selected value from a dropdown list using JavaScript