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

Question

我想使用 jQuery 来更改输入框中的值，使用“选择”选项的“数据最小值”和“数据最大值”值来确定将“选择”值设置为哪一个。

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

<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。这需要使用选择选项的数据最小值和数据最大值来完成。输入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">将更改<select> <option>根据 <input type="number"> 的值处于动态范围内。尽管该演示具有硬编码值 data-min和data-max ，回调函数cbd()可以处理为每个 data-min/max 动态设置的任何有效值分配给每个 <option> 对。

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

顺便说一句从不使用事件属性:

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

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

使用 jQuery 时，始终使用正确的方法(例如 .click() )或使用 .on() 委托(delegate)事件方法(我强烈建议 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>

---

引用文献

Delegating events with jQuery .on() method

Dereferencing jQuery Object to DOM Object

Creating or cloning an array via spread operator

$(this)

.flatMap()

Destructuring arrays with .entries() and a for...of loop

.selectedIndex and .selected properties and .options HTML Collection