javascript 选择的选项功能在 IE 和 safari 中不起作用

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

一些cmets：

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

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

    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) {

同样，虽然您可以将选项作为选择元素的属性来访问，但通过选项集合访问它们会更清晰。此外，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>

或使用样式跨度。