Jquery：根据文本框文本选择下拉选项

Question

我试图根据文本框文本选择选项。

下面是我的HTML

<select id="select1">
    <option value="">-- Please Select --</option>
    <option value="277">12 +$2.99</option>
    <option value="278">25 +$2.75</option>
    <option value="279">50 +$2.50</option>
    <option value="280">100 +$2.00</option>
    <option value="281">250 +$1.90</option>
    <option value="282">500 +$1.70</option>
    <option value="283">1000 +$1.60</option>
    <option value="284">2500 +$1.50</option>
    <option value="285">5000 +$1.20</option>
    <option value="286">10000 +$1.00</option>
    <option value="287">25000 +$0.80</option>
</select>
<input type="text" id="pqr" />

我的js喜欢吼叫

 $(function(){
    $('#pqr').change(function(){
        $txt = $( "#select1 option:contains('"+$(this).val()+"')" ).text();
            $arr = $txt.split(" +");
            $( "#select1").val($txt);
            alert($arr[0])
            $( "#select1" ).filter(function() {
                 alert($( this ).text > $arr[0]);
            })
    });
});

因此，如果用户输入文本12或大于12且低于25我想要选择选项第二12 + $ 2.99并且如果用户输入1500而不是选项1000 + $ 1.60被选中。 基本上我尝试在（+）符号之前比较选项文本并尝试基于此选择。

请给我提示或任何好的帮助，以解决这个问题

Answer 1

遍历每个选项以比较值。 你可以使用这样的东西，

$(function () {
    $('#pqr').change(function () {
        var txtvalue = parseFloat($(this).val());
        $("#select1 option").each(function () {
            var splitText = $(this).next().text().split("+");
            if (splitText.length > 1) {
                if (txtvalue < parseFloat(splitText[0].trim())) {
                    $(this).prop("selected", true);
                    return false;
                }
            }
        });
    });
});

小提琴

Answer 2

尝试这个 ：

$(function(){
    $('#pqr').change(function(){
       var inputVal = parseInt($(this).val());
        $('#select1 option').each(function(){
           var firstVal = $(this).text().split('+')[0];
           var nextVal = inputVal;
           if(!$(this).is(':last'))
            $(this).next().text().split('+')[0];

            if(parseInt(firstVal) <= inputVal && parseInt(nextVal) >=inputVal)
            {
                $(this).prop('selected',true);
            }
        });
    });
});

演示

Answer 3

更改回调函数中的$arr[0]将包含一个尚未解析为整数的文本值，因此语句alert($( this ).text > $arr[0]); 不会给出所需的输出。 要检查一系列选择列表选项之间的值，您可以使用以下数据属性：

<select id="select1">
    <option value="" data-min="-" data-max="-"> Please Select </option>
    <option value="277" data-min="12" data-max="25">12 +$2.99</option>
    <option value="278" data-min="25" data-max="50">25 +$2.75</option>

这样您就不必将选项文本解析为整数。 可以使用jquery数据函数http://api.jquery.com/data/检索这些数据值。

此外，您不会将$('#pqr').val()作为选项文本中的文本，因此您必须收集文本框的值并将其与每个选项的范围进行比较（值> = data-max || value <= data-min）。

Answer 4

在每次更改时，迭代所有选项元素并基于parseInt()进行比较：

jQuery(function($) {
    $('#pqr').on('change', function() {
        var value = parseInt(this.value, 10),
        dd = document.getElementById('select1'),
        index = 0;

        $.each(dd.options, function(i) {
            if (parseInt(this.text, 10) <= value) {
                index = i;
            }
        });

        dd.selectedIndex = index; // set selected option
    });
});

演示

Answer 5

$(function(){
  $('#pqr').on("input", function(){
    var text = this.value;      
    var options = $("#select1 > option");
        var elementToSelect = options.eq(0);
    if (text.match(/[0-9]+/)) {
      elementToSelect = options.filter(function(){
        return Number(this.innerText.split("+")[0]) <= text;
      })
      .eq(-1);
    }
    elementToSelect.attr("selected",true);
  });   
});