當選擇選項時，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>