選擇不同的下拉菜單選項時，輸入字段值將更改

Question

我正在使用HTML創建訂單，需要在其中添加“顏色”下拉菜單和“金額”對應的輸入字段（只讀）。 創建訂單很容易，但是現在我想要的是根據要從“哪種顏色”下拉菜單中選擇哪種“顏色”來更改“金額”值。 假設我們在“哪種顏色”下拉菜單中有五個選項，分別是：

1. 黑色
2. 白色
3. 藍色
4. 綠色
5. 橙子

 <select id="color"> <option value="Black">Black</option> <option value="White">White</option> <option value="Blue">Blue</option> <option value="Green">Green</option> <option value="Orange">Orange</option> </select> 

並且每種顏色都有對應的數量設置，例如：

1. 黑色= $ 100
2. 白色= $ 200
3. 藍色= $ 300
4. 綠色= $ 400
5. 橙色= $ 500

現在我想要的是，當從下拉列表中選擇不同的顏色選項時，我希望“金額”的輸入字段顯示不同的值。 例如，如果選擇了顏色“藍色”，則值“ $ 300”應顯示在金額的只讀輸入字段中，並且應根據選擇的選項不斷變化。

我以為可以使用javascript完成此操作，但是由於我對此還很陌生，因此我發現它有點困難。 這是基本形式的外觀：

 <form action="#" method="post"> <select id="color"> <option value="Black">Black</option> <option value="White">White</option> <option value="Blue">Blue</option> <option value="Green">Green</option> <option value="Orange">Orange</option> </select> <input name="amount" value="" readonly="readonly" onfocus="this.blur()" /> </form> 

期待獲得解決方案。 謝謝。

Answer 1

對於最新的瀏覽器，這是一個相對簡單的解決方案，應為您提供一個從以下位置開始的起點：

function updatePrice (el, priceLog, priceList) {
    priceLog.value = '$' + priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];
}

var colorPrices = {
    'black' : 100,
    'white' : 200,
    'blue' : 300,
    'green' : 400,
    'orange' : 500
};

var select = document.getElementById('color'),
    hidden = document.getElementsByName('amount')[0];

select.addEventListener('change', function(){
    updatePrice(select, hidden, colorPrices);
});

JS小提琴演示 。

• document.getElementById() 。
• document.getElementsByTagName() 。
• Element.addEventListener() 。
• selectedIndex 。
• String.toLowerCase() 。

Answer 2

嘗試這個 ：

<form action="#" method="post">
<select id="color" onchange="func()">
 <option value="Black">Black</option>
 <option value="White">White</option>
 <option value="Blue">Blue</option>
 <option value="Green">Green</option>
 <option value="Orange">Orange</option>   </select>
<input name="amount" id ="valu" value="" readonly="readonly" />
</form>

Javascript：

function func() {
    var option = document.getElementById("color").value;
    if (option =='Black')
    {
    $('#valu').val(100);
    }
        if (option =='White')
    {
    $('#valu').val(200);
    }
        if (option =='Blue')
    {
    $('#valu').val(300);
    }

        if (option =='Green')
    {
    $('#valu').val(400);
    }

        if (option =='Orange')
    {
    $('#valu').val(500);
    }


};

JSFiddle