input field value to change upon selection of different dropdown menu options

问题

I am creating an order form, using HTML, where I need to add a dropdown menu for 'which color' and a corresponding input field, which will be read-only, for the 'amount'. Creating the order form is easy but now what I want is that I want the 'amount' value to change depending on which 'color' has been selected from the 'which color' dropdown menu. Lets say that we've five options inside the 'which color' dropdown menu, namely:

Black
White
Blue
Green
Orange

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

And that each color has a corresponding amount set, for example:

Black = $100
White = $200
Blue = $300
Green = $400
Orange = $500

Now what I want is that I want the input field for 'amount' to show different values when different options of colors are selected from the dropdown. For example if the color 'blue' is selected, then the value '$300' should be shown in the read-only input field for amount and it should keep on changing depending on which option is selected.

I am presuming that this can be done using javascript but as I am fairly new to this, I am finding it a bit difficult. This is how the basic form would look:

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

Looking forward to get a solution. Thanks.

回答1:

This is a relatively simple solution, for up-to-date browsers, and should give you a starting point to work from:

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().

回答2:

Try this :

<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

来源：https://stackoverflow.com/questions/17516982/input-field-value-to-change-upon-selection-of-different-dropdown-menu-options

标签

php

javascript

html

forms

onchange