javascript 更改 select 并更新输入或文本对象

Question

我想制作一个 selection（没有 php 或其他代码），当值发生变化时，我想将值放在另一个 html 标记中，例如输入字段。我看过 w3 学校，只有获取 select 标签值的代码。这是我尝试过的：

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

那么，输入文本中的值应该更新为 select 中的值吗？什么都没发生

Answer 1

<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，你必须为x提供索引才能提供值

Answer 2

可能

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

Answer 3

其实我觉得你想多了:

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

Answer 4

你可以使用非常少的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);
      });
    });

Answer 5

您可以对脚本进行两处更改。

A) 删除 $('desc').val(val) 行。不需要，因为 x.value = val 就足够了。

B) 您可以将 var x = document.getElementsByName("desc") 更改为 var x = document.getElementById("desc")。由于您的名称和 ID 相同，我们可以使用 getElementById() 代替当前的。作为 getElementsByName() returns 一个数组。

所以代码看起来像。

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

此外，由于您是通过 onchange 事件调用 javascript 方法，如果 select 元素只有 1 个选项，您的解决方案将不起作用。要解决此问题，请根据您的用例尝试使用 onblur 或 onclick 代替 onchange。

javascript 更改 select 并更新输入或文本对象

javascript onchage select and update an input or text object

html

javascript

jquery

onchange