2

我有一个 jquery 脚本，它使用数组将下拉选择框的选项转换为 ul 列表项。下拉列表中的每个选项都有一个数字选项值，例如

<option value="12">Size S</option>
<option value="34">Size M</option>
<option value="7">Size L</option>

它被转换为一个列表，如

<ul>
<li class="opt_12">Size S</li>
<li class="opt_34">Size M</li>
<li class="opt_7">Size L</li>
</ul>

在 Firefox 中，一切都按预期工作，列表项的显示顺序与下拉选项的顺序相同。但是 IE 和 Chrome 似乎按选项值按降序自动对数组的选项值进行排序。因此，在 Chrome 和 IE 中，我得到的不是下拉菜单中的尺寸顺序 S、M、L、XL，而是一个类似 XL、M、S、L 的列表。

我注意到一件事：当我使用var options = Array;构造数组时，Firefox 以正确的顺序显示列表元素，而 Chrome 和 IE 显示错误的顺序。当我使用var options = [];时，所有三个经过测试的浏览器都以错误的顺序显示列表。

下面是我用来将下拉列表转换为列表项的脚本的相关代码：

(function($) {
    $.fn.visualAttribute = function(options) {
        var defaults = {
            useTitle: false,
            attrClicked : function(data) {
                return true;
            },
            attrUpdated : function(data) {
            }
        };
        var settings = $.extend(defaults, options);

        //loop all attributes
        var selectbox_counter = 0;
        return this.each(function() {
            //use counter for a unique class for each wrapper
            selectbox_counter++;

            //store reference to attribute selectbox
            var selectbox = $(this);

            //hide the default dropdown (but keep it in dom for posting the required values)
            $(this).css('position', 'absolute').css('left', '-100000px').show();

            //insert wrapper for options
            var wrapper = $('<ul />')
                    .attr("class", "la_wrapper")
                    .attr("id", "la_wrapper_" + selectbox_counter)
                    .appendTo($(this).parent());

            $(this).parent().append('<div style="clear:both"></div>');

            if (selectbox.attr("id") != "") {
                wrapper.attr("rel", selectbox.attr("id"));
            }

            //store all values of the dropdown in an array
            var options = [];
            var option_counter = 0;
            var description = '';

            selectbox.children('option').each(function() {
                option_counter++;

                if (option_counter == 1) {
                    //first option contains the description, e.g. 'please select size'
                    description = $(this).text();
                }

                //only use option if has a value
                var value = $(this).val();
                if (value != '') {
                    options[value] = ({value : value, text : $(this).text()});
                }
            });

            //loop all stored options and create custom html
            if (options.length) {
                for (var index in options) {
                    if (!isNaN(index)) {
                        var value = index;
                        var text = options[index].text;
                        if (!settings.useTitle) {
                            description = '';
                        }
                        wrapper.append('<li title="' + description + '" class="opt_' + value + '"><a href="#' + value + '">' + text + '</a></li>');
                    }
                }
            }

            //set custom options to same value as current selectbox value (only needed in rare cases)
            var current_value = selectbox.val();
            if (current_value > 0) {
                $("#la_wrapper_" + selectbox_counter + ' li.opt_' + current_value + ' a').addClass('selected');
            }

            //event handler for catching a clicked attribute
            $("#la_wrapper_" + selectbox_counter + ' li a').click(function() {

                var value = $(this).attr("href").split('#')[1];

                //use callback
                if (!settings.attrClicked(options[value])) {
                    return false;
                }

                //set value and class
                selectbox.val(value);
                $("#la_wrapper_" + selectbox_counter + ' .selected').removeClass('selected');
                $(this).addClass('selected');

                //use callback
                settings.attrUpdated(options[value]);

                return false;
            });
        });
    };
    })(jQuery);

如何防止 IE 和 Chrome “自动排序”数组并在结果列表中保留/传输下拉选项的原始顺序？

4

3 回答 3

2

如果顺序很重要，请不要value将选项的 of 用作数组键，只需执行一个append（PS 使用[]，而不是Array- 那不是在做你认为它在做的事情）

var options = [];
var option_counter = 0;
var description = '';

selectbox.children('option').each(function() {
    option_counter++;

    //only use option if has a value
    var value = $(this).val();
    if ( value ) {
        options.push({value : value, text : $(this).text()});
    }
});

然后，在循环时，完全摆脱它if (options.length)，并使用常规的 for 循环：

for (var i=0; i<options.length; i++) {
    var value = options[i].value;
    var text = options[i].text;
    if (!settings.useTitle) {
        description = '';
    }
    wrapper.append('<li title="' + description +
                   '" class="opt_' + value +
                   '"><a href="#' + value + '">' + text +
                   '</a></li>');
}
于 2013-03-20T05:10:13.937 回答
1

当你用这个迭代一个数组时：

for (var index in options)

您没有得到保证的顺序，因为您只是在迭代按规范没有保证顺序的对象（不是数组索引）的属性。你应该使用这个：

for (var i = 0; i < options.length; i++)

以数组顺序迭代数组。第一种形式不按特定顺序迭代对象的属性。后一种形式以数组索引顺序迭代数组元素（它为您提供数组顺序中的实际数组元素）。

此外，您声明一个数组：

var options = [];

或者

var options = new Array();

你不应该使用：

var options = Array;
于 2013-03-20T05:16:11.077 回答
0

您的问题是您正在使用for...in枚举属性。

到目前为止，ECMAScript 中未定义对象（包括数组）属性的枚举顺序。有一个建议 ECMAScript 6 或多或少地定义如下顺序：“首先是名称看起来像整数的所有属性，按照数字顺序，然后是所有其他属性，按照它们添加的顺序”。这是 Chrome 和 IE 实现的行为。Firefox 的行为有点复杂，这取决于您的对象是否是数组，以及它是否是一个数组，使用了哪些确切的属性名称以及使用的顺序和数组的长度以及其他一些事情。

在任何情况下，如果您想按顺序枚举值，只需将它们存储在数组中array.push()，然后枚举数组的索引。因此，替换options[value] = ...为options.push(...)并替换for (var index in options)为for (var index = 0; index < options.length; ++index)并从中获取值，options[index].value就像您已经获取文本一样。

于 2013-03-20T05:21:43.460 回答