[Solved-5 Solutions]Get the selected value from a dropdown list using JavaScript - JavaScript Tutorial
Problem:
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>
</select>
<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);
}
</script>
Read Also
Change the selected value of a dropdown list with jqueryGet the selected text from a dropdown list
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>
</select>
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:
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").val(); // The value of the selected optionAngularJS:
//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'
}];Read Also
How to we bind to list of checkbox values with Angular jsJquery get selected option from dropdown
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,
<select>
<option value="1">Wikitechy</option>
</select>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>
</select><br><br>
TextBox1<br>
<input type="text" id="xyz" placeholder="get value on option select"><br>
TextBox2<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
<script>
function run() {
document.getElementById("xyz").value = document.getElementById("Wikitechy_Tutorial").value;
}
</script>
The following script is getting a value from a text box 2 and alerting with its value
<script>
function up() {
//if (document.getElementById("xyz").value != "") {
var dop = document.getElementById("xyz").value;
//}
alert(dop);
}
</script>
The following script is calling a function from a function
<script>
function up() {
var dop = document.getElementById("xyz").value;
pop(dop); // Calling function pop
}
function pop(val) {
alert(val);
}?
</script>