0

Помогите, пожалуйста, на 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

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

2
  • А в чем проблема? Вы и названия события знаете, сами пробовали что-то сделать?
    – ThisMan
    20 июн 2019 в 14:27
  • document.getElementById('type').value — внутренность выбранной опции. 20 июн 2019 в 14:33

2 ответа 2

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>

0

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.