Question

我想要它，以便在选择DropDown List元素时，我能够获取它的值并将输入文本，甚至DIV文本，甚至标签文本设置为所选的值。为什么不起作用？我错过了什么？

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());
  });  
});

整件事：

<!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>

Answer 1

您的代码在设置值的行中有一个额外的)。您需要从

更新

 document.getElementById("hiddenControl").value = $("#bonus option:selected").text());

到

 document.getElementById("hiddenControl").value = $("#bonus option:selected").text();

但是，当您使用jquery时，您应该将其进一步更新为

 $("#hiddenControl").val($("#bonus option:selected").text());

供参考 - http://plnkr.co/edit/3paUZ4wT4GZwZFuCL7Bj?p=preview

Answer 2

您还可以进行以下更改以使其正常工作

$('#bonus').change(function () {
    var text = $("#bonus").find(":selected").text();
    $("#hiddenControl").val(text);
});

使用选定的下拉列表值更改HTML值

2 个答案: