Разные значения input value при выборе из select
Здравствуйте.
Подскажите пожалуйста как для: <input type="text" name="price" value="" /> В value="" подставлять разные значения в зависимости от выбранного параметра select option ? <select name="colour" required> <option hidden value="">Выберите цвет</option> <option value="Красный">Красный</option> <option value="Бирюзовый">Бирюзовый</option> <option value="Фиолетовый">Фиолетовый</option> </select> То есть при выборе цвета, к примеру для красного input value="20" а для фиолетового input value="70" и для бирюзового input value="40" Подскажите пожалуйста как это реализовать ? |
<body> <input type="text" name="price" value="" /> <select name="colour" required> <option hidden value="">Выберите цвет</option> <option value="Красный">Красный</option> <option value="Бирюзовый">Бирюзовый</option> <option value="Фиолетовый">Фиолетовый</option> </select> </body> <script> const data={ 'Красный':20, 'Бирюзовый':70, 'Фиолетовый':40, } document.querySelector('select').addEventListener('change',e=>document.querySelector('input').value=data[e.target.value]) </script> |
:-?
<option value="20">Красный</option> |
Цитата:
|
Цитата:
|
Цитата:
читать про делегирование ... |
Цитата:
<input type="text" name="weight" value="" /> <input type="text" name="price" value="" /> <select name="colour" required> <option hidden value="">Выберите цвет</option> <option value="Красный">Красный</option> <option value="Бирюзовый">Бирюзовый</option> <option value="Фиолетовый">Фиолетовый</option> </select> <script> const data={ 'Красный':20, 'Бирюзовый':70, 'Фиолетовый':40, } document.querySelector('select').addEventListener('change',e=>document.querySelector('input').value=data[e.target.value]) </script> Как применить только для <input type="text" name="price" value="" /> |
правильнее действовать в пределе блока чрезе родителей/детей, если нет, то привязываться не к name, а к id (или class)
<input type="text" id="price" value="" /> document.querySelector('select#price') Также будет правильнее данные сразу задать в HTML, как указал рони, чтоб потом не "дублировать" <option value="20">Красный</option> <body> <div> <input type="text" name="price" value="" /> <select name="colour" required> <option hidden value="">Выберите цвет</option> <option value="20">Красный</option> <option value="70">Бирюзовый</option> <option value="40">Фиолетовый</option> </select> </div> <div> <input type="text" name="price" value="" /> <select name="colour" required> <option hidden value="">Выберите цвет</option> <option value="20">Красный</option> <option value="70">Бирюзовый</option> <option value="40">Фиолетовый</option> </select> </div> </body> <script> selects=document.querySelectorAll('select') selects.forEach(el => el.addEventListener('change', e=>e.target.parentElement.querySelector('input').value=e.target.value) ); </script> |
<input id=weight type="text" name="weight" value="" /> <input id=price type="text" name="price" value="" /> <select id=sel name="colour" required> <option hidden value="">Выберите цвет</option> <option value="20">Красный</option> <option value="70">Бирюзовый</option> <option value="40">Фиолетовый</option> </select> <script> document.getElementById('sel').addEventListener('change', e => document.getElementById('price').value = e.target.value ) </script> |
Спасибо ВСЕМ за помощь. Очень помогли. Спасибо.
|
Часовой пояс GMT +3, время: 08:24. |