Question

我有一个输入和一个选择选项，使用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/，但它不起作用。

Answer 1

您可以使用<style> body { margin: 0; } .gradient { height: 100vh; background: radial-gradient(#EE7752, #CF22E7); background-size: 400% 400%; } </style> <div class="jumbotron text-center gradient"> <div class="content"> <p class="lead" style="color:#FFFFFF"></p> </div> </div>事件来选择所需的值。 foreach函数（循环）中的change将充当return false关键字

break

引用jsFiddle here

Answer 2

要执行此操作，您需要挂钩到文本框的input事件，以便您可以在用户输入时更新选择内容。然后，您可以使用filter()查找比提供的值大option的{{1}}元素，然后再使用data-area选择其中的第一个元素：

prop()

$('#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>值始终按升序排列。

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

2 个答案: