Javascript 在 select 选项被 selected 时更改输入值

Question

我对 javascript 很陌生。所以我有一个 select 选项和一个输入字段。我想要实现的是当我 select 一个特定选项时让输入字段的值发生变化。这是我试过的：

First Name: <input type="text" value="colors">

<select name="">
   <option>Choose Database Type</option>
   <option onclick="myFunction(g)>green</option>
   <option onclick="myFunction(r)>red</option>
   <option onclick="myFunction(o)>orange</option>
   <option onclick="myFunction(b)>black</option>
</select>

<script>
function myFunction(g) {
    document.getElementById("myText").value = "green";
}
function myFunction(r) {
    document.getElementById("myText").value = "red";
}
function myFunction(o) {
    document.getElementById("myText").value = "orange";
}
function myFunction(b) {
    document.getElementById("myText").value = "black";
}
</script>

Answer 1

几件事：

您应该在每个选项上使用 onchange 函数，而不是 onclick。

在每个选项上使用 value 属性来存储数据，并使用 this 的实例来分配更改（或 event.target）

您的文本字段中没有 ID

您缺少 onclick 函数的结尾引号

<select name="" onchange="myFunction(event)">
    <option disabled selected>Choose Database Type</option>
    <option value="Green">green</option>
    <option value="Red">red</option>
    <option value="Orange">orange</option>
    <option value="Black">black</option>
</select>

和函数：

function myFunction(e) {
    document.getElementById("myText").value = e.target.value
}

并添加ID

<input id="myText" type="text" value="colors">

Fiddle: https://jsfiddle.net/gasjv4hs/

Answer 2

您多次创建同名函数。

只有最后一个有效。

您传递的变量 g,r,o,b 未定义。

不要将 onclick 添加到 option 添加 onchange 到 select。

利用HTML5data-*属性

function myFunction(element) {
  document.getElementById("myText").value = element;
}

First Name: <input type="text" id="myText" value="colors">

<select name="" onchange="myFunction(this.value);">
   <option>Choose Database Type</option>
   <option data-value="green">green</option>
   <option data-value="red">red</option>
   <option data-value="orange">orange</option>
   <option data-value="black">black</option>
</select>

Answer 3

你可以这样解决。

` 名字：

<select name="" onchange="myFunction()" id="selectID">
   <option>Choose Database Type</option>
   <option >green</option>
   <option >red</option>
   <option >orange</option>
  <option >black</option>
</select>

<script>
function myFunction() {
    var selectItem = document.getElementByID('selectID').value;
     document.getElementByID('yourId').value = sekectItem;

}
</script>

Answer 4

这是实现该目标的方法：

var select = document.getElementById('colorName');

function myFunction(event) {
  var color = 'No color selected';

  if (select.selectedIndex > 0) {
    color = select.item(select.selectedIndex).textContent;
  }
  
  document.getElementById('myText').value = color;
}

select.addEventListener('click', myFunction);

myFunction();

First Name: <input type="text" id="myText">

<select id="colorName">
   <option>Choose Database Type</option>
   <option>green</option>
   <option>red</option>
   <option>orange</option>
   <option>black</option>
</select>

Answer 5

您的代码应该如下所示。

<input type="text" name="color" id="color">
 <select name="" id="change_color">
    <option>Choose Database Type</option>
   <option >green</option>
     <option >red</option>
    <option >orange</option>
   <option >black</option>
</select>
<script type="text/javascript" src="jquery.js"></script>
<script>
    $(document).ready(function () {     
    $('#change_color').change(function(){
    var color = ($(this).val());
    $('#color').val(color);
    })
    });
</script>

Answer 6

更正确的方法是将您的 JS 代码放在不同的 .js 文件中并使用 Jquery，因为当您进一步编程时，这是正确的方法。

你的HTML

<input type="text" id="color" name="color">
<select name="" id="changeData">
<option>Choose Database Type</option>
<option data-value="green">green</option>
<option data-value="red">red</option>
<option data-value="orange">orange</option>
<option data-value="black">black</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

你的JS

$(document).ready(function () {     
$('#changeData').change(function(){
var color = $(this).val();
$('#color').val(color);
})
});

还要确保您已将 Jquery 库添加到您的项目中。您可以下载 Jquery 并添加到您的项目文件夹中，或者您也可以使用 CDN。在这个例子中使用了 CDN。

Answer 7

我遇到了类似的问题。在我的例子中，我试图根据 select 列表中的选项值更改输入的最小值。我尝试应用上述解决方案，但没有任何效果。所以我想到了这个，它可以应用于类似于这个的问题

HTML

<input id="colors" type="text" value="">

<select id="select-colors" name="" onchange="myFunction()">
   <option disabled selected>Choose Colour</option>
   <option value="green">green</option>
   <option value="red">red</option>
   <option value="orange">orange</option>
   <option value="black">black</option>
</select>

JS

function myFunction() {
var x = document.getElementById("select-colors").value;
document.getElementById("colors").value = x;
  }

它的工作原理是在每次更改时获取 ID 为 "select-colors" 的 select 的值，将其分配给变量 "x" 并将其插入 ID 为 [=] 的输入值中22=]。这可以根据您的问题以任何方式实施

Javascript 在 select 选项被 selected 时更改输入值

Javascript change input value when select option is selected

html

javascript

input

show-hide