Событием change на select получить выбранный пользователем пункт из select

133
22 февраля 2021, 15:40

Помогите, пожалуйста, на js реализовать следующую задачу:

Поле "Тип" влияет на минимальное значение поля "Цена":

<fieldset class="ad-form__element"> 
          <label class="ad-form__label" for="type">Тип</label> 
          <select id="type" name="type"> 
            <option value="one">one</option> 
            <option value="two" selected>two</option> 
            <option value="three">three</option> 
            <option value="four">four</option> 
          </select> 
        </fieldset> 
        <fieldset class="ad-form__element"> 
          <label class="ad-form__label" for="price">Цена</label> 
          <input id="price" name="price" type="number" max="1000000" placeholder="5000" required> 
        </fieldset>

"one" - минимальная цена 0
"two" - минимальная цена 1000
"three" - минимальная цена 5000
"four" - минимальная цена 10 000

Вместе с минимальным значением цены нужно изменять и плейсхолдер.

Answer 1

const types = { 
  one: 0, 
  two: 1000, 
  three: 5000, 
  four: 10000 
}; 
type.addEventListener('change', e => { 
  let minVal = types.hasOwnProperty(e.target.value) ? types[e.target.value] : 0; 
  price.setAttribute('placeholder', minVal); 
  price.setAttribute('min', minVal); 
   
  // Если необходимо контролировать ранее веденное значение 
  // price.value = price.value < minVal ? minVal : price.value; 
}); 
type.dispatchEvent(new Event('change'));
<fieldset class="ad-form__element"> 
  <label class="ad-form__label" for="type">Тип</label> 
  <select id="type" name="type"> 
            <option value="one">one</option> 
            <option value="two" selected>two</option> 
            <option value="three">three</option> 
            <option value="four">four</option> 
          </select> 
</fieldset> 
<fieldset class="ad-form__element"> 
  <label class="ad-form__label" for="price">Цена</label> 
  <input id="price" name="price" type="number" max="1000000" placeholder="5000" required> 
</fieldset>

Answer 2

let dependency = [{ 
    "Key": "one", 
    "Value": "0" 
  }, 
  { 
    "Key": "two", 
    "Value": "500" 
  }, 
  { 
    "Key": "three", 
    "Value": "1000" 
  }, 
  { 
    "Key": "four", 
    "Value": "1500" 
  }, 
]; // зависсимости (я бы сразу в value запихивал...) 
 
document.addEventListener('DOMContentLoaded', function() { 
  let select = document.getElementById("type"); // наш select 
  let options = select.querySelectorAll("option"); // наши элементы списка 
  let price = document.getElementById("price"); // наш input 
 
  f(options, select, price); 
 
  select.onchange = function() { // при выборе элемента 
    f(options, select, price); 
  }; 
 
}); 
 
function f(options, select, price) { 
  options.forEach(function(e, ind) { // хожу по опциях 
    if (ind === select.selectedIndex) { // если индекс select-а равен номеру option 
      let curPrice = null; 
      dependency.forEach(ee => { // ищем зависсимость 
        if (ee.Key === e.value) { // если нашли 
          curPrice = ee.Value; // достаем цену 
          return; 
        } 
      }); 
      price.setAttribute("placeholder", curPrice); // меняем placeholder 
    } 
  }); 
}
<fieldset class="ad-form__element"> 
  <label class="ad-form__label" for="type">Тип</label> 
  <select id="type" name="type"> 
    <option value="one">one</option> 
    <option value="two" selected>two</option> 
    <option value="three">three</option> 
    <option value="four">four</option> 
  </select> 
</fieldset> 
<fieldset class="ad-form__element"> 
  <label class="ad-form__label" for="price">Цена</label> 
  <input id="price" name="price" type="number" max="1000000" placeholder="5000" required> 
</fieldset>

READ ALSO
Масштабирование сайта ctrl + колесико мыши

Масштабирование сайта ctrl + колесико мыши

Всем привет, у меня такой вопрос:

124
Почему input и button выпадают из div?

Почему input и button выпадают из div?

В общем нужно сделать так, чтобы в div находился input и button (типо как строка поика, но еще с background в )Но по каким-то причинам они выпадают

98
Обновление элементов в ComboBox после Get запроса

Обновление элементов в ComboBox после Get запроса

У меня после запроса приходит список, который я заполняю в ComboboxУ меня получается так, что после нового запроса список в Combobox дополняется,...

130
Где посмотреть все коды ошибок при регистрации?

Где посмотреть все коды ошибок при регистрации?

У меня поставленная регистрация:

108