如何根据从下拉列表中选择的项目设置范围

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 上获取这些选项，并将它们设置为输入的最小和最大属性。

更改仅限于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">