前端之家

  1. 首页
  2. 问答

jQuery动态数比较

• 问答

我有一个带有1个输入和1个带选项的选择的表单（例如：2500,3000,4000,5000）

我需要能够：

  • 为选择中的每个选项创建一个数组
  • 当我在输入字段（数字）中输入值
  • 确定每个select.value之间的值是text.value
  • 假单击select.value，该值是“最小”范围。

示例：

  • input = 2800>伪造selection.option(2500)
  • input = 3200>伪造selection.option(3000)

比较棘手的地方是所选内容在每个页面上都有不同的值。

这时，要进行测试：

<input min="0" max="7000" class="largeur" value="" type="number" placeholder="" required="">

<select id="longueur" class="" name="attribute_longueur" data-attribute_name="attribute_longueur" data-show_option_none="yes">
  <option value="">Choisir une option</option>
  <option value="2508" class="attached enabled">2508</option>
  <option value="4785" class="attached enabled">4785</option>
</select>

$(".largeur").keyup(function() {
  console.log('keyup');
  $('#longueur option[value="2508"]').prop('selected',true); // Only to test fake click on value 2508
});

感谢您的帮助！

guoguo337 回答：jQuery动态数比较

要创建值数组，可以使用map()。从那里，您只需要读取输入到number输入中的值，然后确定数组中哪个值最接近该值。可以按照this excellent answer中@JoeGrund提供的代码来完成后者。然后，只需设置val()中的select。试试这个：

var $select = $('#longueur');
var values = $select.children('option').map(function() {
  var value = $(this).val();
  return value.trim() == '' ? null : parseInt($(this).val(),10);
}).get();

$('.largeur').on('input',function() {
  var typedValue = parseInt($(this).val(),10);
  var closestValue = values.reduce(function(prev,curr) {
    return (Math.abs(curr - typedValue ) < Math.abs(prev - typedValue ) ? curr : prev);
  });
  $select.val(closestValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input min="0" max="7000" class="largeur" value="" type="number" placeholder="" required="">

<select id="longueur" class="" name="attribute_longueur" data-attribute_name="attribute_longueur" data-show_option_none="yes">
  <option value="">Choisir une option</option>
  <option value="2508" class="attached enabled">2508</option>
  <option value="4785" class="attached enabled">4785</option>
</select>

jquerynumbersrangeselect
本文链接：https://www.f2er.com/3157693.html

大家都在问