Как сделать привязку на вывод нужного input при выборе option в select

Question

Как сделать привязку на вывод нужного input при выборе option в select

Рейтинг: 0Ответов: 1Опубликовано: 20.01.2023

Есть select с выбором зоны доставки. К каждому option соотвествует свой input. При загрузке страницы стоит option "в пределах МКАД" - привязанный input со значением 0 и без доступа на редактирование. При выборе option "За МКАД" - input со значением 0 меняется на input в который уже вписывается кол-во км до цели.

Не знаю - как привязать вывод нужного input к выбранному в select option.

 div.select-delivery //контейнер с селектом(пишу через сборщик поэтому сокращенный код)
   select#delivery(name="delivery")//решетка - это id 
     option#dev_non(value="0")// опция в пределах МКАД со значением 0 и неизменяемая 
       |В пределах МКАД (бесплатно)
     option#dev_check//опция при выборе которой появляется другой input в который польз вписывает значение км не меньше 1
       |От МКАД:
 <input id="dev_non" type="number" class="modern-radio" value="0" readonly>//должен быть привязан к option#dev_non
 <input id="dev_check" type='number' class="modern-radio" min="1">//должен быть привязан к option#dev_check

javascript html веб-программирование вёрстка

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

как привязать вывод нужного input к выбранному в select option

Можно конечно сделать вот так...

document.querySelector('#delivery').addEventListener('change', e => {
  document.querySelectorAll('.modern-radio').forEach(o => o.classList.add('off'))
  const o = e.target
  const id = o.options[o.selectedIndex].dataset.id
  console.log
  document.querySelector('#' + id).classList.remove('off')
})

.modern-radio.off {
    display: none;
}

<div>
  <select id='delivery' name="delivery">
    <option data-id='dev_non'>В пределах МКАД</option>
    <option data-id='dev_check'>От МКАД:</option>
  </select>
</div>
<input id="dev_non" type="number" class="modern-radio" value="0" readonly />
<input id="dev_check" type='number' class="modern-radio off" min="1" />

Но можно ведь обойтись и одним input.

document.querySelector('#delivery').addEventListener('change', e => {
    const o = document.querySelector('#dev_check')
    if (e.target.selectedIndex === 0) {
        o.setAttribute('readonly', '')
        o.min = 0
        o.value = 0
    } else {
        o.removeAttribute('readonly')
        o.min = 1
        o.value = ''
    }
})

<div>
    <select id='delivery' name="delivery">
        <option>В пределах МКАД</option>
        <option>От МКАД:</option>
    </select>
</div>
<input id="dev_check" type='number' class="modern-radio" min="0"  value="0" readonly />

Как сделать привязку на вывод нужного input при выборе option в select

Ответы