-2

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

4

2 回答 2

1

为此，您需要挂钩到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值始终按升序排列。

于 2018-07-16T06:58:14.460 回答
1

您可以使用change事件来选择所需的值。foreach 函数（循环）中的return false将充当break关键字

$('#area').change(function(){
    var area = $('#area').val();
    $('select#demo option').each(function(){
    if(parseInt($(this).attr('data-area')) >= parseInt(area) ){
        $('select#demo').val($(this).val());
      return false;
    }
  })
})

在此处参考jsFiddle

于 2018-07-16T06:55:25.290 回答