如何在单个标签中使用两个data-min和data-max属性 [英] how can i use two data-min and data-max attribute in single tag

问题描述

我想在选择的产品上验证产品的宽度和厚度，我已经用宽度完成了，但是对厚度感到困惑.

I want to validate the width and thickness of the product on a selected product I am done with width but confuse with the thickness.

一样，我想验证10到200之间的宽度，也想验证1到30之间的厚度.因此，我设法验证宽度，但在管理厚度时感到困惑.这是我的代码:

like, I want to validate the width between 10 to 200 and also want to validate the thickness between 1 to 30. So I manage to validate the width but confuse in managing thickness. here is my code:

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

  $('#product').change(function() {
    var $selected = $(this).find('option:selected');
    $width.prop({
      min: $selected.data('min'),
      max: $selected.data('max')
    });
    $thickness.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-width="10" data-max-width="200" data-min-thickness="1" data-max-thickness="20">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 />
  
  thickness: <input type="number" id="thickness" required />
  <button>Submit</button>
</form>

推荐答案

您可以添加更多特定的数据属性:

You can just add more specific data attributes:

data-min-width，data-max-width，data-min-thickness，data-max-thickness

这篇关于如何在单个标签中使用两个data-min和data-max属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！