Javascript-форум - Разные значения input value при выборе из select

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Разные значения input value при выборе из select (https://javascript.ru/forum/misc/83097-raznye-znacheniya-input-value-pri-vybore-iz-select.html)

Разные значения 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>

Цитата:

Сообщение от od0201

Спасибо за помощь. Все правильно. Но подскажите если у меня несколько других <input type="text" name="price" value="" /> и <input type="text" name="weight" value="" /> то он начинает добавлять значения не для того input. Как сделать так чтобы он работал только для input name="price" ?

Цитата:

Сообщение от рони

<option value="20">Красный</option>

Спасибо но это не то... он просто передаст значение цвета как 20. Нужно чтобы именно для <input type="text" name="price" value="" /> чтобы вывело значение.

Цитата:

Сообщение от wemon

Спасибо но это не то...

зачем усложнять, и оберните код в блоки с классом смотреть что должно получиться тут https://javascript.ru/forum/misc/830...tml#post540185

читать про делегирование ...

Цитата:

Сообщение от рони

зачем усложнять, и оберните код в блоки с классом

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

Спасибо ВСЕМ за помощь. Очень помогли. Спасибо.