当选择选项时，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

创建具有相同名称的多次功能。

只有最后一个会工作。

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