1

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

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

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

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

4

3 回答 3

3

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

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

这应该比你所拥有的快很多倍（可能快 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]);
        }
    });

它很简单，并且执行速度应该比以前快很多倍。它有一个选择器操作，然后使用哈希表查找来为给定的选项值找到适当的类名。

于 2012-04-30T07:12:21.940 回答
1

这些选择器在 Firefox 中似乎也很慢。

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

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

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

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

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

于 2012-04-30T07:04:28.287 回答
1

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

将如此大量的元素放在 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);
    });
}
于 2012-04-30T07:06:22.850 回答