javascript onchage选择并更新输入或文本对象
[英]javascript onchage select and update an input or text object
问题描述
I want to make a selection (without a php or other code) and when the value changes, I want to put the value in another html tag like an Input field. 
我想进行选择（没有php或其他代码），并且当值更改时，我想将该值放入另一个html标记（如输入字段）中。 I've looked upon w3 schools and there's only code for getting the value of the select tag. 我看过w3学校，只有代码来获取select标签的值。 Here's what I've tried: 这是我尝试过的：
<body>
<select name="selection" id="selection" onchange="update(this.value)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input name="desc" type="text" id="desc" />
</body>
<script>
function update(val) {
var x = document.getElementsByName("desc");
x.value = val;
$('desc').val(val);
}
</script>
So, in the input text should update with the value from the select? 那么，在输入文本中应该使用选择的值进行更新吗？ Nothing happens 什么都没发生
5 个解决方案
解决方案1
1 2017-05-16 18:43:08
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <select name="selection" id="selection" onchange="update(this.value)"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <input name="desc" type="text" id="desc" /> </body> <script> function update(val) { var x = document.getElementsByName("desc"); x[0].value = val; $('desc').val(val); } </script>
document.getElementsByName return array, you have to provide index for x to provide value document.getElementsByName返回数组，您必须为x提供索引以提供值
解决方案2
0 2017-05-16 18:48:03
Maybe 也许
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function update(combo) {
var x = document.getElementById("desc");
x.value = combo.options[combo.selectedIndex].value;
}
</script>
<!--js-->
</head>
<body>
<select name="selection" id="selection" onchange="update(this)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input name="desc" type="text" id="desc" />
</body>
</html>
解决方案3
0 已采纳 2017-05-16 18:49:56
Actually I think you are overthinking it: 实际上，我认为您想得太多了：
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
</head>
<body>
<select name="selection" id="selection" onchange="update(this.value)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input name="desc" type="text" id="desc" />
</body>
<script>
function update(val) {
$('#desc').val(val);
}
</script>
</html>
解决方案4
0 2017-05-16 18:50:40
You can use proper very less jQuery Code 您可以使用适当的更少的jQuery代码
<select name="selection" id="selection" >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input name="desc" type="text" id="desc" />
$(document).ready(function() {
$("#selection").change(function(){
$('#desc').val(this.value);
});
});
解决方案5
0 2017-05-16 19:04:19
You can do two changes to your script. 您可以对脚本进行两项更改。
A) Remove $('desc').val(val) line. A）删除$('desc').val(val)行。 It is not needed since x.value = val would suffice. 不需要它，因为x.value = val就足够了。
B) You can change var x = document.getElementsByName("desc") into var x = document.getElementById("desc") . B）您可以将var x = document.getElementsByName("desc")更改为var x = document.getElementById("desc") 。 Since you have name and id same, we can use getElementById() in place of current one. 由于您的名称和ID相同，因此我们可以使用getElementById（）代替当前名称。 As getElementsByName() returns an array. 由于getElementsByName（）返回一个数组。
So the code will look like. 因此代码看起来像。
<select name="selection" id="selection" onchange="update(this.value)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input name="desc" type="text" id="desc" />
<script>
function update(val) {
var x = document.getElementById("desc");
x.value = val;
}
</script>
Also, since you are calling your javascript method through onchange event, your solution will not work if select element has only 1 option. 另外，由于您是通过onchange事件调用javascript方法的，所以如果select元素只有1个选项，则您的解决方案将无法正常工作。 To fix this, try using onblur or onclick inplace of onchange depending upon your usecase. 要解决此问题，请根据您的用例尝试使用onblur或onclick代替onchange。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.