Use selected dropdown list value to change HTML Value
Question
I want it so that when the DropDown List element is selected, I am able to grab it's value and set the input text, or even a DIV text, or even a label text to the value that was selected. Why doesn't it work? What am I missing?
jsfiddle: https://jsfiddle.net/fob6kp6k/
HTML:
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
<input id="hiddenControl" runat="server" />
JS/JQ:
$(document).ready(function(){
$('#bonus').change(function() {
document.getElementById("hiddenControl").value = $("#bonus option:selected").text());
});
});
whole thing:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#bonus').change(function() {
document.getElementById("hiddenControl").value = $("#bonus option:selected").text());
});
});
</script>
</head>
<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
<input id="hiddenControl" runat="server" />
</body>
</html>
2 answers
solution1
0 2015-07-27 19:35:30
Your code has an extra ) in the line where you are setting the value. You need to update from
document.getElementById("hiddenControl").value = $("#bonus option:selected").text());
to
document.getElementById("hiddenControl").value = $("#bonus option:selected").text();
However, as you are using jquery, you should update it further to following
$("#hiddenControl").val($("#bonus option:selected").text());
For reference - http://plnkr.co/edit/3paUZ4wT4GZwZFuCL7Bj?p=preview
solution2
0 2015-07-27 19:40:34
You can also make the below changes to make it working
$('#bonus').change(function () {
var text = $("#bonus").find(":selected").text();
$("#hiddenControl").val(text);
});
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.