Question

我有magento商店和带有下拉列表的产品，有30种不同尺寸的选项。我还有一个文本框，我需要引用下拉列表并根据框中的内容选择一个值。

因此，例如，如果有人在文本框中键入105，我需要jQuery在下拉列表中自动选择100-110的值（这反过来触发已经到位的价格的ajax更改）。

这是否可以在jQuery中使用，我应该看看哪些功能？

编辑：到目前为止jQuery代码......

<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

循环遍历每个选项元素，并检查给定值是否在选项值的范围内。 小提琴：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

此代码假定所有选项值采用以下格式：x-y（其中x和y为数字）。如果您的代码包含120+之类的代码，则必须修改代码。如果是这种情况，请发布带有相关代码链接的评论，我会看一下。

更新 - 小提琴：http://jsfiddle.net/QFfLB/4/
使用.text()方法获取选项的标签。然后，使用.match(/\d+/g)查找数字值：

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

jQuery从下拉列表中选择值取决于文本值

1 个答案: