使用 Jquery 如何获取输入值来确定数据最小最大范围上的选择框值

Question

我想使用 jQuery 更改输入框中的值，使用我的 Select 选项的 Data-Min 和 Data-Max 值来确定将 Select 值设置为哪个。

我有以下代码（注意：我使用静态值更新了选项代码，选项和数据值将从数据库动态加载，因此它们会有所不同）：

<input type="number" step="0.1" name="cbd" id="cbd" class="form-control" onchange="selectGrade()" value="0">

<select class="form-control" name="cbdGrade" id="cbdGrade"> 
<option value=""></option>  
<option value="{D6C3B40F-9559-473A-8B24-44A911A82D52}" data-min="0" data-max="0">CBD 0 - 5.75</option>              
<option value="{4FD86F65-74BA-4F10-9D5F-57281ECFC76A}" data-min="0.1" data-max="1.9">CBD 1 - 17.50</option>
<option value="{3AC0F33C-D48E-4C10-B64A-B5473AF8DB98}" data-min="2" data-max="2.9">CBD 2 - 15.15</option>
</select>

当最终用户在 cbd 字段中输入一个值时，我想采用该值并确定应该应用什么 cbdGrade。 这需要使用选择选项的 data-min 和 data-max 值来完成。 输入到 cbd 的值需要在范围内。 cbd 字段值适合的具有正确范围的选项应设置为 cbdGrade。

我怎样才能做到这一点？ 我有一些 jQuery 经验，但是这让我很难过如何从每个选项中获取范围。

编辑 - 到目前为止添加我的脚本。

function selectGrade() {
var cbdLevel = document.getElementById('cbd').value;
var arrGrade = new Array;

$("#cbdGrade option").each  ( function() {
    arrGrade.push ( $(this).data('min')+'-'+$(this).data('max')+'-'+$(this).val());
});

alert ( arrGrade.join(',' ) );

}

这是返回一组数据和选项值，这是正确的方法吗？ 然后我如何遍历这个数组并将它与我的变量 cbdLevel 进行比较？

Answer 1

事件处理

以下演示在触发"input"事件*时， <input type="number">将根据<input type="number">的值在动态范围内更改<select> <option> 。 尽管该演示具有data-min和data-max硬编码值，但回调函数cbd()可以处理为分配给每个<option>每个data-min/max对动态设置的任何有效值。

* _{（ "input"事件相对于"change"事件的优势在于它是立即发生的）}

BTW从不使用 on-event 属性：

👎 使用 jQuery 或 JavaScript 处理事件时不该做什么的示例

<button onclick="functionName()">LAME</button>
...
function functionName(event) {...

使用 jQuery 时，请始终使用正确的方法（例如.click() ）或使用.on()方法委托事件（我强烈建议在 99% 的情况下使用后者。）

👍 jQuery 最有效的事件处理方式示例

<button class='btn'>NOT LAME</button>
 ...
 $('.btn').on('click', functionName)
 function functionName(event) {...

---

该演示得到了广泛的评论，还提供了参考资料。

演示

 // Delegate input#cdbData to the input event -- callback is cdb() $(function() { $('#cbdData').on('input', cbd); }); // Callback function/Event handler passes Event Object by default function cbd(event) { /* Dereferenced jQuery Object $('#cbdRate') to DOM Object NOTE: Plain JavaScript equivelant would be: const select = document.getElementById('cdbRate'); or const select = document.querySelector('#cdbRate'); */ const select = $('#cbdRate')[0]; // Collect all select#cdbRate option into an Array const rates = [...select.options]; /* Store the value of input#cdbData as a real Number in a variable IMPORTANT NOTE: input#cdbData is $(this) */ let float = parseFloat($(this).val()); /* Ensure that integer values are suffixed with ".0" (this is just for aesthetics and is not required) */ $(this).val(float.toFixed(1)); /* IF input#cdbData value is :out-of-range... add .out class and remove .in class OTHERWISE... do vice versa of the above actions (this is just for aesthetics and is not required) */ if ($(this).is(':out-of-range')) { $(this).addClass('out').removeClass('in'); } else { $(this).addClass('in').removeClass('out'); } /* .flatMap() method (a combo of .map() and .flat() methods), will run a function over each element within a given array and will return a flattened array of results. NOTE: the callback function returns an Array of an Array -- so the final return will be an Array of Arrays (aka two dimensional array, aka data-table) On each select#cdbRate option... Get the value of data-min convert it into a real Number and add it to the minMax sub-Array[0] Then do likewise for data-max and minMax sub-Array[1] Final returned minMax Array has the following pattern: minMax = [['', ''], [data-min, data-max], [data-min, data-max], [data-min, data-max]]; Each sub-Array represents the min/max values of an <option> Use the .data() jQuery method to set/get data-* attributes */ let minMax = rates.flatMap((opt, idx) => { return idx === 0 ? [ ["", ""] ] : [ [Number($(opt).data('min')), Number($(opt).data('max'))] ] }); // Get length of minMax Array let size = minMax.length; // Get the least and the greatest values of minMax Array let min = minMax[1][0]; let max = minMax[size - 1][1]; // Assign min and max values to input#cbdData this.min = min; this.max = max; /* Iterate through rates Array... IF `float` is greater OR equal to current value of minMax sub-Array[0] AND... IF `float` is less OR equal to current value of minMax sub-Array[1]... then select the current <option> OR IF `float` is not a Number OR `float` is greater than the last value of minMax Array[1]... then select <option> at index 0 IMPORTANT NOTE: The dereferenced jQuery Object `select` must be used because the Plain JavaScript property .selectedIndex and .selected are not recognized by jQuery */ for (let [index, option] of rates.entries()) { if (float >= minMax[index][0] && float <= minMax[index][1]) { option.selected = true; } else if (Number.isNaN(float) || float > max) { select.selectedIndex = 0; } } // Uncomment the comment below to review the log of minMax Array // log(minMax); // Stop event bubbling and terminate function return false; } // Optional utility function (not required) function log(data) { return console.log(JSON.stringify(data)); }

 :root { font: 400 3vw/6vh Consolas } .form-control { display: inline-block; font: inherit; font-size: 1rem } #cbdData { width: 6ch; text-align: center; } .in { background: initial; } .out { background: tomato; }

 <input id="cbdData" name="cbdData" class="form-control" type="number" step="0.1"> <select id="cbdRate" name="cbdRate" class="form-control"> <option value="" default>-----</option> <option data-min="0.0" data-max="0.0" value='{D6C3B40F-9559-473A-8B24-44A911A82D52}'>CBD 0</option> <option data-min="0.1" data-max="1.9" value='{4FD86F65-74BA-4F10-9D5F-57281ECFC76A}'>CBD 1</option> <option data-min="2.0" data-max="2.9" value='{3AC0F33C-D48E-4C10-B64A-B5473AF8DB98}'>CBD 2</option> </select> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

参考

使用 jQuery .on()方法委托事件

将 jQuery 对象取消引用到 DOM 对象

通过扩展运算符创建或克隆数组

$(this)

.flatMap()

使用.entries()和for...of循环.entries()数组

.selectedIndex和.selected属性和.options HTML 集合

Answer 2

你可以试试：

 function selectGrade(value) { const valueNumber = Number(value) switch (true) { case valueNumber < 0: cbdGrade.selectedIndex = 0 break; case valueNumber === 0: cbdGrade.selectedIndex = 1 break; case valueNumber <= 1.9: cbdGrade.selectedIndex = 2 break; case valueNumber <= 2.9: cbdGrade.selectedIndex = 3 break; default: cbdGrade.selectedIndex = 0 break; } }

 <input type="number" step="0.1" name="cbd" id="cbd" class="form-control" onchange="selectGrade(this.value)" value="0"> <select class="form-control" name="cbdGrade" id="cbdGrade"> <option value=""></option> <option value="{D6C3B40F-9559-473A-8B24-44A911A82D52}" data-min="0" data-max="0">CBD 0 - 5.75</option> <option value="{4FD86F65-74BA-4F10-9D5F-57281ECFC76A}" data-min="0.1" data-max="1.9">CBD 1 - 17.50</option> <option value="{3AC0F33C-D48E-4C10-B64A-B5473AF8DB98}" data-min="2" data-max="2.9">CBD 2 - 15.15</option> </select>