JQuery динамическое сравнение числа

Question

У меня есть форма с 1 входом и 1 выбором с параметрами (пример: 2500,3000,4000,5000)

Мне нужно иметь возможность:

• Создатьмассив для каждой опции в select
• Когда я ввожу значение в поле ввода (число)
• Определить между каждым select.value текст.value
• Ложный щелчокв значении select.value, которое является диапазоном "min".

Пример:

• 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
});

Спасибо за помощь!

Answer 1

Для создания массива значений вы можете использовать map(). Оттуда вам просто нужно прочитать значение, которое вводится на вход number, а затем определить, какое значение в массиве ближе всего к этому. Последнее можно сделать, следуя коду, предоставленному @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>