如何使用jQuery文本框中提供的输入选择价格范围？

Question

我有一个DropDownList，其中包含如下所示的价格范围

• 高达50L
• 50L至1CR
• 1CR至5CR
• 5CR至10CR

我还有一个文本框，允许用户在文本框中输入价格。 现在，我希望每当用户提供一些有效的价格时，应根据给定的价格设置所选商品。 例如，如果我放入2345或543245或887，则DropDownList的选定项应高达50L ；如果我放入8432321，则选定值应为50L至1CR 。 我试图为此放置以下代码，但未按预期工作。

JavaScript代码：

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

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

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

.ASPX代码：

<asp:DropDownList ID="ddlPriceRange" runat="server" ClientIDMode="Static"/>
<asp:TextBox ID="txtPrice" runat="server" ClientIDMode="Static"/>

下面给出了使用上述给定代码生成的输出

Answer 1

我对您的逻辑做了两个小改动。

1. 我将给定范围的最小值作为选项元素的value属性添加。 因此，您可以将输入值与绝对值进行比较，而不必将输入值与选项的文本进行比较。

   <option value="5000000">50L to 1CR</option>

2. 我没有观察change事件，而是在input事件上添加了事件，以便在用户键入数字时更新下拉列表。

 jQuery(function($) { $('#txtPrice').on('input', function() { var value = parseInt(this.value, 10), dd = document.getElementById('ddlPriceRange'), index = 0; $.each(dd.options, function(i) { if (parseInt(this.value, 10) <= value) { index = i; } }); dd.selectedIndex = index; // set selected option }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="ddlPriceRange"> <option value="0">Up to 50L</option> <option value="5000000">50L to 1CR</option> <option value="10000000">1CR to 5CR</option> <option value="50000000">5CR to 10CR</option> <option value="9007199254740991">Above 10CR</option> </select> <input type="text" id="txtPrice" value="0" />