javascript - 如何从下拉列表中验证选择特定产品的最小值和最大值

Question

当用户从选项框中选择特定产品时，我想在宽度文本框中验证用户只输入 10 到 200 之间的值

我已完成获取选定值但无法正确验证它

我还使用了 HTML5 属性 min 和 max 但不起作用。

$(function() {
  $('#product').change(function() {
    if ($('#product').val() == 'Copper flat') {
      if ($('#width').val() >= 10 && $('#width').val() <= 200) {
        alert("Value must be between 10 to 200")
      }
    } else if ($('#product').val() == 'Fabricated Copper Busbar') {

    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="product" id="product" class="form-control">
  <option selected="selected" value="">Product type</option>
  <option value="Copper flat">Copper flat</option>
  <option value="Fabricated Copper Busbar">Fabricated Copper Busbar</option>
  <option value="Fabricated aluminium Busbar">Fabricated aluminium Busbar</option>
</select>

Answer 1

要设置 input 的 min 和 max 值，请使用 jQuery 的 prop() 方法。另请注意，您可以通过将与每个 option 关联的值放在元素的 data 属性中来干燥逻辑，当 change 事件发生。试试这个:

$(function() {
  var $width = $('#width');

  $('#product').change(function() {
    var $selected = $(this).find('option:selected');
    $width.prop({
      min: $selected.data('min'),
      max: $selected.data('max')
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <select name="product" id="product" class="form-control">
    <option selected="selected" value="">Product type</option>
    <option value="Copper flat" data-min="10" data-max="200">Copper flat</option>
    <option value="Fabricated Copper Busbar" data-min="100" data-max="2000">Fabricated Copper Busbar</option>
    <option value="Fabricated aluminium Busbar" data-min="50" data-max="75">Fabricated aluminium Busbar</option>
  </select>

  Width: <input type="number" id="width" required />
  <button>Submit</button>
</form>