选择选项时,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/