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)

wemon 12.09.2021 18:34

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

Подскажите пожалуйста как это реализовать ?

od0201 12.09.2021 19:38

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

рони 12.09.2021 19:42

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

wemon 12.09.2021 20:04

Цитата:

Сообщение от od0201
<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="" /> и <input type="text" name="weight" value="" /> то он начинает добавлять значения не для того input. Как сделать так чтобы он работал только для input name="price" ?

wemon 12.09.2021 20:09

Цитата:

Сообщение от рони
<option value="20">Красный</option>

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

рони 12.09.2021 20:16

Цитата:

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

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

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

wemon 12.09.2021 20:30

Цитата:

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

<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="" />

od0201 12.09.2021 21:02

правильнее действовать в пределе блока чрезе родителей/детей, если нет, то привязываться не к 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>

voraa 12.09.2021 21:06

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

wemon 12.09.2021 21:13

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


Часовой пояс GMT +3, время: 08:24.