选择不同的下拉菜单选项时要更改的输入字段值

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

试试这个：

<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

Answer 2

这是一个相对简单的解决方案，适用于最新的浏览器，应该为您提供一个工作起点：

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 Fiddle demo.

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