Javascript not working while getting value from Dropdown
Question
I have written a simple HTML page where, on a button click event, the selected value from a drop down is printed in a textbox. I have used javascript for this task. I don't know why it's not working, though the logic seems ok to me. Any help would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample</title>
</head>
<body>
<table align="center">
<tr>
<td>
<select id="drpdwn" name="drpdwn">
<option selected>Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" name="textbox" id="textbox">
</td>
</tr>
<tr>
<td>
<button onclick="myFunction()">Go</button>
</td>
</tr>
</table>
<script>
myFunction() {
var el = document.getElementById("drpdwn");
var sel_value = el.options[el.selectedIndex].value;
document.getElementById("textbox").value = sel_value;
}
</script>
</body>
</html>
2 answers
solution1
1 ACCPTED 2018-02-27 22:02:06
I believe the problem was the fact that you are trying to get the value of the select using el.options[el.selectedIndex].value; I have made minimal corrections to your snippet in order for it to work and also used querySelector which is much better in terms of reusability than getElementById
document.querySelector('.btn').addEventListener('click',function() { var el = document.querySelector("#drpdwn"); var sel_value = el.value; document.querySelector("#textbox").value=sel_value; });
<!DOCTYPE html> <html lang="en"> <head> <title>Sample</title> </head> <body> <table align="center"> <tr> <td> <select id="drpdwn" name="drpdwn"> <option selected>Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </td> </tr> <tr> <td> <input type="text" name="textbox" id="textbox"> </td> </tr> <tr> <td> <button class="btn" type="submit">Go</button> </td> </tr> </table> </body> </html>
solution2
1 2018-02-27 22:03:52
To get the option value from the select element you can just do el.value
This is version does the job using only vanilla javascript without the jQuery library:
document.addEventListener("DOMContentLoaded", function(event) {
var el = document.getElementById("drpdwn");
var button = document.getElementsByClassName('btn')[0];
var textBox = document.getElementById("textbox");
button.onclick = function() {
textBox.value = el.value;
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.