Question

如果您在IE7 / IE8中运行此页面http://jsfiddle.net/atoswchataigner/euX5F，您将获得：

停止运行此脚本？此页面上的脚本导致Internet Explorer运行缓慢。如果它继续运行，您的计算机可能会无响应。

我基本上运行所有这些脚本来对选择中的选项进行分组。

你是否看到更好的方法来进行这种转换并在IE中摆脱这种警报？

Answer 1

您正在运行大量的选择器操作，每个操作都不是很有效，尤其是在旧版浏览器中。

做一个选择器操作并处理该操作中的所有选项值要好得多。您可以通过为选项值构建查找表来为此提供相应的类名。这是一个例子。我没有填写整个表格，因为它打字很多（你可以输入其余部分），但这是它的工作方式。

这应该比你的快许多倍（可能快100倍）：

    // class names used for various options
    var optionClasses = [
        "ART - LETTRES - SPECTACLE",
        "ECONOMIE",
        "ETRANGER"
    ];
    // the number in the option map corresponds to an array index 
    // in the optionClasses array.  This is done to avoid repeating
    // the same string over and over
    var optionMap = {
        'ART - LETTRES - SPECTACLE': 0,
        'A la une ALS': 0,
        'Cirque' : 0,
        'Festival multidisciplinaire': 0,
        'Littérature-édition': 0,
        'Musique classique': 0,
        'Photographie': 0,
        'Cinéma': 0,
        /* .... */
        'ECONOMIE': 1,
        'A la une Economie': 1,
        /* ... */
        'ETRANGER': 2,
        'A la une Etranger': 2
        /* fill in the rest of the data here */
    };

    jQuery("select option").each(function() {
        if (this.value && this.value in optionMap) {
            var clsNum = optionMap[this.value];
            $(this).addClass(optionClasses[clsNum]);
        }
    });

它很简单，应该比以前快几倍。它有一个选择器操作，然后使用哈希表查找来查找给定选项值的相应类名。

Answer 2

这些选择器在firefox中看起来也很慢。

我猜“[option value ='...']”部分会导致jQuery扫描整个文档中的所有元素，寻找匹配的元素。它为每个选择器中的每个术语（部分在'，'之间）执行此操作。这是很多工作。

我有一个小提琴，并发现在Firefox中，如果我使用这样的方法，它会更具响应性：

var options = $("option");
var $XXX = options.filter("[value=VALUE1], [value=VALUE2], [value=VALUE3]");
// etc

这样做首先创建一个只包含select选项的jquery对象/集合，然后从那里使用选择器来过滤掉所需的选项。

尝试修改代码以使用此方法。

Answer 3

根据我的理解，您的代码所做的是根据第一个选择加载第二个选择的选项。

在DOM上放置如此大量的元素是非常密集的。而不是加载异常长的DOM元素行，而是将数据存储为数组和对象，并在必要时加载。这样，选择将以空白开头。

//storing second options as objects and arrays
var second = {
    art : [
        {text:'artOption1Text',value:'artOption1Value'},
        {text:'artOption2Text',value:'artOption2Value'},
        {text:'artOption3Text',value:'artOption3Value'}
        ...
    ],
    social : [
        {text:'socialOption1Text',value:'socialOption1Value'},
        {text:'socialOption2Text',value:'socialOption2Value'},
        {text:'socialOption3Text',value:'socialOption3Value'}
        ...
    ]
    ...
}

var secondSelect = $('secondselect');          //reference your second select

$('firstselect').on('change',function(){       //on change of first select
    var newOptions = second[this.value];       //get the new values

    secondSelect.children().remove();          //remove current options

    $.each(newOptions,function(index,option){ //add the new options

        $('<option>')
            .attr('value',option.value)
            .text(option.text)
            .appendTo(secondSelect);
    });
}

IE中的jQuery选择器太慢了

3 个答案: