[WW-3560] Double Select HTML Output Bug

• Type: Bug
• Status: Closed
• Priority: Major
• Resolution: Fixed
• Fix Version/s: 2.2.3

Environment

Blackberry Browser

• Flags: Patch
• Assignee: Maurizio Cucchiara
• Reporter: Federico
• Created: 17/Jan/11 18:20
• Updated: 28/Oct/12 22:11
• Resolved: 18/Jan/11 21:51

Description

So I find out a bug with the HTML generated by the double select.
The problem with the current HTML generated is that it doesn't work in all browsers (BlackBerry Browser).

Consider the double select that comes in the source

<tr>
<td class="tdLabel"><label for="foo_bar" class="label">mylabel:</label></td>
<td>
<select name="foo.bar" id="foo_bar" onmousedown="window.status='onmousedown';" onmouseup="window.status='onmouseup';" onmouseover="window.status='onmouseover';" onmousemove="window.status='onmousemove';" onmouseout="window.status='onmouseout';" onchange="foo_barRedirect(this.options.selectedIndex)">
<option value="BE">Belgium</option>
<option value="FR">France</option>
</select>
<br/>
<select name="region" id="region">
</select>
<script type="text/javascript">
var foo_barGroup = new Array(2 + 0);
for (i = 0; i < (2 + 0); i++)
foo_barGroup[i] = new Array();

foo_barGroup[0][0] = new Option("Antwerp", "AN");
foo_barGroup[0][1] = new Option("Gent", "GN");
foo_barGroup[0][2] = new Option("Brugge", "BRG");
foo_barGroup[1][0] = new Option("Paris", "PA");
foo_barGroup[1][1] = new Option("Bordeaux", "BOR");

var foo_barTemp = document.inputForm.region;
foo_barRedirect(0);

function foo_barRedirect {
var selected = false;
for (m = foo_barTemp.options.length - 1; m >= 0; m--)

{ foo_barTemp.options[m] = null; }

for (i = 0; i < foo_barGroup[x].length; i++)

{ foo_barTemp.options[i] = new Option(foo_barGroup[x][i].text, foo_barGroup[x][i].value); }

if ((foo_barTemp.options.length > 0) && (! selected))

{ foo_barTemp.options[0].selected = true; }

}
</script>
</td>
</tr>

The problem is on the onchange function of the "parent" select.
Instead of foo_barRedirect(this.options.selectedIndex) it must be foo_barRedirect(this.selectedIndex)
selectedIndex is a property of the select object not the options.

The other issue is when we clean the options on the second select before we add the new ones.

Instead of
for (m = foo_barTemp.options.length - 1; m >= 0; m--) {
foo_barTemp.options[m] = null;
}

It must be
for (m = foo_barTemp.options.length - 1; m >= 0; m--) {
foo_barTemp.remove(m);
}

I check this in the Gecko DOM Reference (https://developer.mozilla.org/en/DOM/HTMLSelectElement)
I also test this in Mozilla, Chrome, IE8 an IE6.

I am attaching a diff as instructed in the mailing list.