Я создаю форму заказа, используя HTML, где мне нужно добавить раскрывающееся меню для «того цвета» и соответствующего поля ввода, которое будет доступно только для чтения для «суммы». Создание формы заказа легко, но теперь я хочу, чтобы я хотел изменить значение «количество» в зависимости от того, какой «цвет» выбран из раскрывающегося меню «какой цвет». Допустим, у нас есть пять вариантов внутри раскрывающегося меню «какой цвет», а именно:
<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>
И каждый цвет имеет соответствующее количество, например:
Теперь я хочу, чтобы я хотел, чтобы поле ввода для «количества» отображало разные значения, когда из раскрывающегося списка выбраны различные варианты цветов. Например, если выбран цвет «синий», тогда значение «$ 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>
Ждем решения. Благодарю.
Это относительно простое решение для современных браузеров и должно дать вам отправную точку для работы с:
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 .
document.getElementById() . document.getElementsByTagName() . Element.addEventListener() . selectedIndex . String.toLowerCase() . Попробуй это :
<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