时间戳

首页 > 解决方案 > 当属性大于输入值时选择一个选项 - Jquery

jquery - 当属性大于输入值时选择一个选项 - Jquery

问题描述

我有一个输入和一个选择选项使用 select2 ：

<input type="number" id ="area"/>
<select id ="demo">
  <option data-area = "100">100 area</option>
  <option data-area = "150">150 area</option>
  <option data-area = "200">200 area</option>
  <option data-area = "230">230 area</option>
</select>

var area = $('#area').val();

if (area) {
  $('select#demo').filter(function() {
    if ($(this).attr('data-area') > compare) {
      alert(1);
    } else {
      alert(2);
    }
  });
}

当用户输入数字时（例如：130），预期结果：自动选择此选项

<option data-area = "150">150 area</option>

这是一个演示http://jsfiddle.net/1fh4jmsy/6/但它不起作用。

标签： jqueryjquery-select2

解决方案

为此，您需要挂钩到input文本框的事件，以便您可以在用户键入时更新选择。然后，您可以使用filter()查找大于提供值的option元素，然后使用选择其中的第一个：data-areaprop()

$('#area').on('input', function() {
  var val = $(this).val();

  $('#demo option').filter(function() {
    return $(this).data('area') >= parseInt(val, 10);
  }).first().prop('selected', true);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="area" />

<select id="demo">
  <option data-area="100">100 area</option>
  <option data-area="150">150 area</option>
  <option data-area="200">200 area</option>
  <option data-area="230">230 area</option>
</select>

请注意，此逻辑假定option值始终按升序排列。

推荐阅读