Question

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

它在我尝试过的所有内容中都可以正常工作但是IE。正如您在HTML示例中看到的那样，这些选项包含在optgroups中。我在document.ready上创建了一个选项对象，然后从DOM中删除它们。在更改状态选择框时，我将带有optgroups的选项子集放入存储选择中。但是，IE只放置了optgroups，而不是选项。我尝试了几种不同的方法将元素附加到选择中，但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参数是所有optgroups和选项的对象。此功能可过滤并附加它们。

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));
    });  
}

谢谢！

Answer 1

我编写了一些代码来测试从一个选择中抓取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>

IE9状态/商店选择选项不会追加

1 个答案: