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):

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

```

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?