Question

对此的任何帮助都会非常感激！

我在IE和Safari中只有这个javascript代码有问题。

它在其他浏览器中工作正常，例如firefox和chrome。

我相信IE和Safari它没有正确地循环遍历所有选择选项值。例如在firefox中，p有两个值，但在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>

Answer 1

一些意见：

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

存储对元素的引用要好得多。如果它是一个select元素，它的长度就是选项的数量。用这种方式写它更清楚：

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

但我不会在这里设置len，见下文。

将i，j，k等用作循环计数器并在for表达式中初始化它们更为常见。在这里设置限制也很常见：

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

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

同样，虽然您可以将选项作为select元素的属性进行访问，但通过选项集合访问它们更加清晰。此外，label属性通常称为text，因此：

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

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

通过设置select元素的值来设置所选选项也是一种非常新的行为，将选项设置为选中更为常见：

        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>

或使用样式范围。

javascript选择的选项功能无法在IE和Safari中使用

1 个答案: