0

我在 IE9 及以下版本中遇到了一个麻烦的 javascript 错误。我有两个选择框。一个是“选择您的州”框。此选择将选择的选项过滤到该状态下的选项。

它在我尝试过的所有东西中都能按预期工作，但 IE 除外。正如您在 HTML 示例中看到的那样，选项包含在 optgroups 中。我在 document.ready 上创建了一个选项对象，然后将它们从 DOM 中删除。在更改状态选择框时，我将带有 optgroups 的选项子集放入商店选择中。但是，IE 只放置了 optgroup，而不放置选项。我尝试了几种将元素附加到选择的不同方法，但 IE 不会附加 optgroups 的子选项。

这是简化的 html 和适用的 javascript。这是一个 Drupal 站点，所以我正在使用 jQuery 1.4.4。

<select id="edit-state">
    <option value="AL">Alabama</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
</select>

假设选择了 Arizona，这应该是第二个选择框的 HTML：

<select id="edit-store">
    <optgroup label="AZChandler">
        <option value="SPCHRAZ">Store Name</option>
    </optgroup>
    <optgroup label="AZPhoenix">
        <option value="SPPVAAZ">Store Name</option>
        <option value="SPSCTAZ">Store Name</option>
    </optgroup>
    <optgroup label="AZScottsdale">
        <option value="SPRNTAZ">Store Name</option>
    </optgroup>
    <optgroup label="AZTempe">
        <option value="SPTEMAZ">Store Name</option>
    </optgroup>
    <optgroup label="AZTucson">
        <option value="SPORAAZ">Store Name</option>
        <option value="SPSPEAZ">Store Name.</option>
        <option value="SPRRDAZ">Store Name</option>
    </optgroup>
</select>

这是javascript。此函数在#edit-state 更改时调用。options 参数是所有 optgroup 和选项的对象。此功能过滤并附加它们。

function setStateOptions(options){
  var stateabbr = jQuery('#edit-state').find('option').filter(':selected').attr('value');
    jQuery('#edit-store optgroup').remove();

    jQuery(options).each(function() {
        var label = jQuery(this).attr('label');
        var abbr = label.substr(0, 2);
        if(abbr == stateabbr){
          var clone = jQuery(this).clone();
          jQuery(clone).appendTo('#edit-store');
         }
    });
    //remove postal code abbr from beginning of optgroup labels.
    jQuery('#edit-store optgroup').each(function(){
        var optlabel = jQuery(this).attr('label');
        jQuery(this).attr('label', optlabel.substr(2));
    });  
}

谢谢！

4

1 回答 1

0

我稍微编辑了代码以测试从一个选择中抓取 optgroup 并将它们放在另一个中。以下似乎在 IE9 中使用 jquery 1.4.4 可以正常工作。我现在的理论是，问题不在于函数，而在于您传入的参数。

<select id="edit-store">
    <optgroup label="AZChandler">
        <option value="SPCHRAZ">SPCHRAZ</option>
    </optgroup>
    <optgroup label="AZPhoenix">
        <option value="SPPVAAZ">SPPVAAZ</option>
        <option value="SPSCTAZ">SPSCTAZ</option>
    </optgroup>
    <optgroup label="AZScottsdale">
        <option value="SPRNTAZ">SPRNTAZ</option>
    </optgroup>
    <optgroup label="AZTempe">
        <option value="SPTEMAZ">SPTEMAZ</option>
    </optgroup>
    <optgroup label="AZTucson">
        <option value="SPORAAZ">SPORAAZ</option>
        <option value="SPSPEAZ">SPSPEAZ</option>
        <option value="SPRRDAZ">SPRRDAZ</option>
    </optgroup>
</select>​
<select id="Select2">
</select>
<script type="text/javascript">
    jQuery('#edit-store optgroup').each(
        function () {
            var label = jQuery(this).attr('label');
            var abbr = label.substr(2, 1);
            if (abbr == 'T') {
                var clone = jQuery(this).clone();
                jQuery(clone).appendTo('#Select2');
            }
        }
    );
</script>
于 2013-01-03T18:35:26.970 回答