选择选择选项时Javascript更改输入值

Question

我对 javascript 很陌生。所以我有一个选择选项和一个输入字段。我想要实现的是在我选择特定选项时改变输入字段的值。这是我尝试过的：

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

小提琴：https://jsfiddle.net/gasjv4hs/

Answer 2

更正确的方法是将您的 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 3

我遇到了类似的问题。在我的情况下，我试图根据选择列表中选项的值来更改输入的最小值。我尝试应用上述解决方案，但没有任何效果。所以我就自带了这个，可以应用于类似这个的问题

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”的选择值，将其分配给变量“x”并将其插入到 id 为“colors”的输入值中。这可以根据您的问题以任何方式实现

Answer 4

您多次创建具有相同名称的函数。

只有最后一个有效。

您传递的变量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 5

你可以这样解决。

`名字：

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

这是实现这一目标的一种方法：

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 7

您的代码应如下所示。

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