Question

我正在创建一个订单表单，使用HTML，我需要为'which'添加一个下拉菜单，并为'amount'添加一个只读的相应输入字段。创建订单表单很简单，但现在我想要的是我希望'amount'值根据从'which color'下拉菜单中选择的'color'来改变。假设我们在'which color'下拉菜单中有五个选项，即：

黑色
白
蓝
绿色
橙

<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>

并且每种颜色都设置了相应的数量，例如：

Black = $ 100
白= $ 200
蓝色= $ 300
绿色= $ 400
Orange = $ 500

现在我想要的是，当从下拉列表中选择不同的颜色选项时，我希望'amount'的输入字段显示不同的值。例如，如果选择了颜色“蓝色”，则值'$ 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 Fiddle demo

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

输入字段值，以便在选择不同的下拉菜单选项时进行更改

2 个答案: