Question

I have magento store and a product with a dropdown with 30 options of a range of sizes. I also have a text box which I need to reference the dropdown and select a value dependant on what is written in the box.

So for example if someone types in 105 in the text box I need jQuery to automatically select the value of 100-110 in the dropdown (which in turn triggers an ajax change of price which is already in place).

Is this possible in jQuery and what functions should I be looking at?

Edit: jQuery code so far…

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#options_483998_text").keyup(function(){
        var value = jQuery("#options_483998_text").val() * 1;
        var jQueryselect = jQuery("select#attribute592");
        var optionValue = "";
        jQuery('option', jQueryselect).each(function(){
            var range = jQuery(this).text().match(/\d+/g);
            if(range && value >= range[0] && value <= range[1]){
                optionValue = this.value;
                return false;
            }
        });

        jQueryselect.val(optionValue);jQueryselect.change();

    });
    jQuery("#options_483997_text").keyup(function(){
        var value = jQuery("#options_483997_text").val() * 1;
        var jQueryselect = jQuery("select#attribute593");
        var optionValue = "";
        jQuery('option', jQueryselect).each(function(){
            var range = jQuery(this).text().match(/\d+/g);
            if(range && value >= range[0] && value <= range[1]){
                optionValue = this.value;
                return false;
            }
        });

        jQueryselect.val(optionValue);jQueryselect.change();
    });


});
</script> 

Answer 1

Loop through each option element, and check whether the given value is within the range of the option value. Fiddle: http://jsfiddle.net/QFfLB/2/

var value = $("#inputBox").val() * 1; //Convert to number, example: 105
var elem;
$('select option').each(function(){
    var val = $(this).val();    //Example:  100-110
    var range = val.split("-"); //Example: [100,110]
    if(val >= range[0] && val <= range[1]){
        elem = this;
        return false;
    }
});
elem = $(elem); //If existent, elem will be the jQuery object,
                // representing the option element

This code assumes all option values to be in the following format: x-y (where x and y are numbers). If your code contains something like 120+, the code has to be modified. If this is the case, post a comment with a link to your relevant code, and I will have a look at it.

Update – Fiddle: http://jsfiddle.net/QFfLB/4/
Use the .text() method to get the label of an option. Then, use .match(/\d+/g) to find the number values:

var value = $("#inputBox").val() * 1;    //Get number
var $select = $("select#attribute592");  //<select> element
var optionValue = "";                    //Default value
$('option', $select).each(function(){
    var range = $(this).text().match(/\d+/g); //Range
    if(range && value >= range[0] && value < range[1]){
        optionValue = this.value;
        return false;
    }
});
$select.val(optionValue);                //Set new option value