2

これに関するどんな助けも大いに感謝されるでしょう！

IEとSafariでのみこのJavaScriptコードに問題があります。

FirefoxやChromeなどの他のブラウザでも正常に動作します。

IEとSafariは、すべての選択オプション値を正しく循環していないと思います。たとえば、Firefoxではpに2つの値がありますが、safariでは1つの値しかありません。

JAVASCRIPT

<script type="text/javascript">
function selected(val, val1)
{
    var len = document.getElementById('attribute122').length;
    var p;
    for(p=0;p<len;p++)
    {
        if(document.getElementById('attribute122')[p].label == val1)
        {
            document.getElementById('attribute122').value = document.getElementById('attribute122')[p].value;
            document.getElementById('att_'+val).className = 'active';
        }
        else
        {
            if(document.getElementById('attribute122')[p].label !="Choose an Option...")
            {
                var chalpeveere = document.getElementById('attribute122')[p].label;
                // alert(chalpeveere);
                chalpeveere = chalpeveere.replace('.','_');
                // alert(chalpeveere);
                document.getElementById('att_' + chalpeveere).className = 'none';
            }
        }
    }
}

</script>

HTML

<div class="input-box">
<select id="attribute122" class="required-entry super-attribute-select" name="super_attribute[122]">
<option value="">Choose an Option...</option>
<option value="3" price="0">Medium</option>
</select>
</div>


<div class="Medium">
<a id="att_Medium" class="none" href="javascript:selected('Medium', 'Medium')"> </a>
</div>
4

1 に答える 1

2

いくつかのコメント：

function selected(val, val1) {
    var len = document.getElementById('attribute122').length;

要素への参照を保存する方がはるかに優れています。選択要素の場合、その長さはオプションの数です。そのように書く方が明確です。

    var select = document.getElementById('attribute122');
    var len = select.options.length;

しかし、私はlenここに設定しません。以下を参照してください。

、、などをループカウンターとして使用し、for式で初期化するiのがはるかに一般的です。ここでも制限を設定するのが一般的です。jk

    for (var i=0, len=select.options.length; i<len; i++) {

      if (select[p].label == val1) {

繰り返しになりますが、select要素のプロパティとしてオプションにアクセスできますが、optionsコレクションを介してオプションにアクセスする方が明確です。また、labelプロパティはより一般的には、として知られているtextので、次のようになります。

      if (select.options[i].text == val1) {

。

        document.getElementById('attribute122').value = document.getElementById('attribute122')[p].value;

select要素の値を設定してselectedオプションを設定することも非常に新しい動作であり、オプションをselectedに設定するのがはるかに一般的です。

        select.selectedIndex = i;

また

        select.options[i].selected = true;

。

        document.getElementById('att_'+val).className = 'active';
    }
    else
    {
        if(document.getElementById('attribute122')[p].label !="Choose an Option...")
        {

おそらくそれが最初のオプションなので、次のことをテストできます。

        if (select.selectedIndex != 0) {

。

            var chalpeveere = document.getElementById('attribute122')[p].label;

になります：

            var chalpeveere = select.optoins[i].text;

。

            // alert(chalpeveere);
            chalpeveere = chalpeveere.replace('.','_');
            // alert(chalpeveere);
            document.getElementById('att_' + chalpeveere).className = 'none';
        }
      }
    }
  }

したがって、整理されたコードは次のようになります。

function selected(val, val1) {
    var select = document.getElementById('attribute122'); 
    var options = select.options;

    for(var i=0, iLen=options.length; i<iLen; i++) {

        if (options[i].text == val1) {
            options[i].selected = true;
            document.getElementById('att_'+val).className = 'active';

        } else {

            if (select.selectedIndex != 0) {
                var chalpeveere = options[i].text;
                // alert(chalpeveere);
                chalpeveere = chalpeveere.replace('.','_');
                // alert(chalpeveere);
                document.getElementById('att_' + chalpeveere).className = 'none';
            }
        }
    }
}

HTMLの場合：

<a id="att_Medium" class="none" href="javascript:selected('Medium', 'Medium')">foo</a>

ボタンが必要な場合は、ボタンを使用します。

<button id="att_Medium" class="none" onclick="
  selected('Medium', 'Medium')
">Set selected</button>

またはスタイルスパンを使用します。

于 2012-11-06T04:43:17.590 に答える