Как установить диапазоны на основе элемента, выбранного из выпадающего

Question

Я пытаюсь создать функцию на своем веб-сайте, которая запрещает пользователям вводить число, выходящее за пределы установленного диапазона. Сначала пользователь выбирает элемент из выпадающего списка. Затем они вводят число в поле ввода, которое имеет ограничения (например, минимальное значение равно -1000, максимальное значение равно 1000).

Я знаю, что могу установить предел в самом поле ввода, но, поскольку каждый элемент в раскрывающемся списке имеет свой набор ограничений, я не знаю, как установить 88 различных ограничений.

<div>
 <select onChange="dropdownTip(this.value)" class="chosen" name="search_type" style="margin-right:10px; margin-top:2px;"> <!--bug-check-->
  <option selected="selected" value="" disabled select>Choose Compound</option>
  <option>Acetone</option>
  <option>Acetic acid</option>
  <option>Acetonitrile</option>
  <option>Benzene</option>
  <option>iso-Butane</option>
 </select>
</div>

<script type="text/javascript">
 $(".chosen").chosen();
</script>

<script>
var item = {
       "Acetone": {"box":"14.3145","box1":"2756.22","box2":"228.060"},
       "Acetic acid": {"box":"15.0717","box1":"3580.80","box2":"224.650"},
       "Acetonitrile": {"box":"14.8950","box1":"3413.80","box2":"250.523"},
       "Benzene": {"box":"13.7819","box1":"2726.81","box2":"317.572"},
       "iso-Butane": {"box":"13.8254","box1":"2181.79","box2":"248.870"},
}

function dropdownTip(element) {
      if (element) {
      console.log(item[element]['box'],item[element]['box1'],item[element]['box2']);
        document.getElementById("myBox").value=item[element]['box'];
        document.getElementById("myBox1").value=item[element]['box1'];
        document.getElementById("myBox2").value=item[element]['box2'];
      }
 }

 dropdownTip("Acetone")
 dropdownTip("Acetic acid")
 dropdownTip("Acetonitrile")
 dropdownTip("Benzene")
 dropdownTip("iso-Butane")
</script>

<br>

<form id="antoine-input" class="form-horizontal my-form" method="POST" onsubmit="event.preventDefault(); return csProcess()">
 <div class="form-group">
  <div class="col-sm-12">
    <div class="form-group">

      <div id="cs-parameters">
        <label id="cs-parameters-label">Parameters for Antoine Equation</label>
      </div>

      <div class="col-sm-4 text-center">
        <label id="cs-a-label" class="control-label">A</label>
        <input type="text" id="myBox" class="form-control" name="cs_a" onkeypress="return positiveDecimal(event)"/><br>
      </div>

      <div class="col-sm-4 text-center">
        <label id="cs-b-label" class="control-label">B</label>
        <input type="text" id="myBox1" class="form-control" name="cs_b" onkeypress="return positiveDecimal(event)"/><br>
      </div>

      <div class="col-sm-4 text-center">
        <label id="cs-c-label" class="control-label">C</label>
        <input type="text" id="myBox2" class="form-control" name="cs_c" onkeypress="return positiveDecimal(event)"/><br>
      </div>

      <div class="col-sm-4 text-center"> //this is the input field I am concerned about
        <label id="cs-tc-label" class="control-label">Temperature (ºC)</label>
        <input type="text" id="myBox3" class="form-control" name="cs_temp" onkeypress="return negativeDecimal(event)"/><br>
      </div>
     </div>
    </div>
   </form>

На самом деле в раскрывающемся меню есть еще 83 элемента, но я решил не включать их все.

Answer 1

Вот простой пример того, что я прокомментировал.

Сначала вам нужно установить свои собственные атрибуты в опциях выбора.С jQuery вы просто захватите эти опции на change и установите их как входные атрибуты min и max.

Изменение ограничено input, textarea, and select элементами и срабатывает, когда вы «меняете» значение.https://api.jquery.com/change/

Это не совсем идеально для того, чтобы пользователь «вводил» их значение с клавиатуры, поскольку вы не можете ограничить фактический тип, однако он работает с кнопками увеличения и уменьшения.Конечно, входные данные должны быть подтверждены.

$('select').change(function() {
  var myInput = $('.ranger');
  var getMin = $(this).find(':selected').attr('data-min');
  var getMax = $(this).find(':selected').attr('data-max');

  myInput.attr({
    'max': getMax,
    'min': getMin
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option data-min="1" data-max="5">one</option>
  <option data-min="5" data-max="10">two</option>
  <option data-min="10" data-max="20">three</option>
</select>
<input class="ranger" type="number">