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" />

我的JavaScript代码如下：

 $(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选项。基本上，我已经尝试比较加号前的选项文本，并根据此选择。

请给我提示或任何有用的帮助来解决这个问题。

- Jalpesh Patel

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

Fiddle

- Anoop Joshi P

---

但我发现一个问题，如果我先插入25，然后再插入50000，它将不会选择25000。 - Jalpesh Patel

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

Demo

- Bhushan Kawadkar

---

但是我发现一个问题，如果我先插入25，然后再插入50000，它不会选择25000。 - Jalpesh Patel

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 data函数http://api.jquery.com/data/可以检索这些数据值。

此外，您并不总是能够获取 $（'# pqr'）.val（）作为选项文本中的文本，因此您需要收集文本框的值，并将其与每个选项的范围进行比较（value >= data-max || value <= data-min）。

- raviture

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

演示

- Ja͢ck

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

- openorclose