How to Get selected Text and Value of DropDownList on OnChange event using JavaScript

Introduction

In this article, I will explain with the help of an example to get selected Text and Value of DropDownList on OnChange event using JavaScript.


techstudy.org

Kindle Paperwhite High Resolution Display Tablet | Rs. 9999

When an item is selected in the HTML Select DropDownList, the GetSelectedTextValue JavaScript function is executed to which the reference of the HTML Select DropDownList is passed as parameter. Using this reference, the selected Value & Text is determined and is displayed using a JavaScript alert box.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
 
</head>
<body>
    Select Car:
    <select id="ddlCars" onchange="GetSelectedTextValue(this)">
        <option value=""></option>
        <option value="1">Nissan</option>
        <option value="2">Toyota</option>
        <option value="3">Honda</option>
		<option value="4">Audi</option>
		<option value="5">Mercedes</option>
    </select>
    <script type="text/javascript">
        function GetSelectedTextValue(ddlCars) {
            var selectedText = ddlCars.options[ddlCars.selectedIndex].innerHTML;
            var selectedValue = ddlCars.value;
            alert("Selected Text: " + selectedText + " Value: " + selectedValue);
        }
    </script>
</body>
</html>

     

Result




Related Topics

Responses




Popular Posts

Facebook

Founded in 2016, Tech Study passionately delivers stylish and dynamic innovative information to programmer and technology lovers. http://www.techstudy.org/.