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

Question

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\'. Cr

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