Using Jquery how to take Input value to determine select box value on Data Min Max Range

Question

I would like to use jQuery on change of the value in an input box using the Data-Min and Data-Max values of my Select options to determine which one to set the Select value to.

I have the following code (Note: I updated options code with static values, options and data values will be loaded dynamically from the database, so they will vary):

When the end user inputs a value into cbd field I would like to take that value and determine what cbdGrade should be applied. This needs to be accomplished using the data-min and data-max values of the select options. The value input into cbd needs to be within the range. The option with the correct range that the cbd field value fits within should be set as the cbdGrade.

How can I accomplish this? I have some jQuery experience but this one has me stumped on how to get the ranges from each option.

Edit - Adding my script so far.

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(',' ) );

}

This is returning an array of Data and option values, is this the correct way to do this? How do I then iterate through this array and compare it to my variable cbdLevel?

zer00ne · Accepted Answer

Event Handling

The following demo upon triggering the "input" event*, on the will change the being within a dynamic range. Although the demo has hard-coded values for data-min and data-max, the callback function cbd() can handle any valid values set dynamically for each data-min/max pair assigned to each .

*_{(the advantage of "input" event over "change" event is that it is happens instantly)}

BTW never use an on-event attribute:

👎 Example of what NOT to do for event handling with jQuery or JavaScript


...
function functionName(event) {...

When using jQuery, always use the proper method (ex. .click()) or delegate events with the .on() method (I highly recommend using the latter 99% of the time.)

👍 Example of the most effective way of event handling with jQuery


 ...
 $('.btn').on('click', functionName)
 function functionName(event) {...

The demo is commented extensively and there are references provided as well.

Demo

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

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

References

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