0

IE9 以下で厄介な JavaScript エラーが発生します。私は2つの選択ボックスを持っています。1 つは「Select Your State」ボックスです。この選択は、選択のオプションをその状態のオプションにフィルターします。

IE以外で試したすべてで期待どおりに動作します。HTML サンプルでわかるように、オプションは optgroup で囲まれています。document.ready でオプションのオブジェクトを作成し、DOM から削除します。状態選択ボックスの変更時に、オプションのサブセットを optgroups とともにストア選択に配置します。ただし、IE は optgroup のみを配置し、オプションは配置しません。select に要素を追加するいくつかの異なる方法を試しましたが、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>

アリゾナが選択されたと仮定すると、これは 2 番目の選択ボックスの 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>

これがジャバスクリプトです。この関数は、#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を取得し、別の選択に配置することをテストしました。以下は、jquery1.4.4を使用するIE9で正常に機能するようです。私の理論では、問題は関数ではなく、渡したパラメーターにあるということです。

<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 に答える