Question

Any help on this would be MUCH appreciated!

I am having a problem with this javascript code in IE and Safari only.

It works fine in other browser e.g firefox and chrome.

I believe in IE and Safari it’s not cycling through all the select option values correctly. e.g. in firefox there are two values for p, however in safari only 1 value.

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

Some comments:

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

Much better to store a reference to the element. If it’s a select element, its length is the number of options. It’s clearer to write it that way:

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

But I wouldn’t set len here, see below.

It’s much more common to use i, j, k, etc. as loop counters and to initialise them in the for expression. It’s common to set the limit here too:

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

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

Again, while you can access the options as properties of the select element, it’s clearer to access them via the options collection. Also, the label property is more commonly known as text, so:

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

.

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

Setting the selected option by setting the value of the select element is also very new behaviour, it is far more common to set the option to selected:

        select.selectedIndex = i;

or

        select.options[i].selected = true;

.

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

Pesumably that is the first option, so you can just test:

        if (select.selectedIndex != 0) {

.

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

becomes:

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

.

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

So the tidied code becomes:

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

In the HTML:

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

If you want a button, use a button:

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

or use a style span.