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

Javascript change input value when select option is selected

提问by Daniel C.

I am very new to javascript. So i have a select option and an input field. What i want to achieve is to have the value of the input field change when i select a particular option. This is what i have tried:

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

回答by tymeJV

A few things:

一些东西：

You should use the onchangefunction, rather than onclickon each individual option.

您应该使用该onchange功能，而不是onclick针对每个单独的选项。

Use a valueattribute on each option to store the data, and use an instance of thisto assign the change (or event.target)

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

You have no ID on your text field

您的文本字段上没有 ID

You're missing the end quote for your onclickfunction

您缺少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>

And the function:

和功能：

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

And add the ID

并添加ID

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

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

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

回答by Sreeraj Nair

More proper way is to put your JS code in a different .js file and use Jquery as when you go further with your programming this is the proper way.

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

Your HTML

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

Your JS

你的JS

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

Also make sure that you have added Jquery Library to your Project. You can either download Jquery and add in your project folder OR also you can use CDN. in this example CDN is used.

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

回答by Fizy Alasdair

I came up with a similar problem. In my case i was trying to change the minimum value of an input based on the value of an option in a select list. I tried to apply the above solutions but nothing worked. So i came with this, which can be applied to problems similar to this

我想出了一个类似的问题。就我而言，我试图根据选择列表中选项的值更改输入的最小值。我尝试应用上述解决方案，但没有任何效果。所以我带来了这个，它可以应用于类似的问题

HTML

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

JS

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

This works by getting the value of the select with id "select-colors" on every change, assigning it into a variable "x" and inserting it into the input value with id "colors". This can be implemented in anyway based on your problem

这是通过在每次更改时获取 id 为“select-colors”的 select 的值，将其分配给变量“x”并将其插入到 id 为“colors”的输入值中来实现的。这可以根据您的问题以任何方式实施

回答by Sagar V

You create functions with same name multiple times.

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

Only last one will work.

只有最后一个会起作用。

the variables you pass g,r,o,bare undefined.

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

Don't add onclickto optionadd onchangeto select.

不要添加onclick到option添加onchange到select.

Make use of HTML5data-*attribute

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

回答by Mustafa aga

You can resolve it this way.

你可以这样解决。

` First Name:

` 名字：

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

回答by Patrick Roberts

Here's a way to achieve that:

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

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>

回答by user8063037

Your code should be like following.

您的代码应该如下所示。

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