Chained-select JavaScript Oprera Conflict
Hank Francis
I use a chained-select JavaScript script to select multiple catagory levels.
http://www.ee-stuff.com/Expert/Upload/getFile.php?fid=3267
It works perfectly in IE6+ and Firefox but it does NOT work with Opera 7+.
In Opera, there are many BLANK items at the bottom of each catagory level.
How can this be fixed to work with Opera?
Thanks!
------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
</head>
<body><h1>Edit</h3>
<form action="/manage_listings.php" method=post name="pef" id="pef"
enctype="multipart/form-data">
<input type=hidden name="f[product_id]" value="152">
<input type=hidden name="listing_id" value="152">
<input type=hidden name="product_id" value="152">
<input type=hidden name="no_subm" id="no_subm" value="">
<input type=hidden name="file_id" value="">
<input type=hidden name="cntr" value="10">
<script language="javascript" type="text/javascript">
var arr = new Array();
arr[arr.length] = new PT(1,'Single Family',0, '');
arr[arr.length] = new PT(9,'Townhouse',0, '');
arr[arr.length] = new PT(81,'House',0, '');
arr[arr.length] = new PT(85,'Townhouse',9, '');
arr[arr.length] = new PT(91,'Link',0, '');
arr[arr.length] = new PT(90,'Semi-Detached',9, '');
arr[arr.length] = new PT(99,'Condo Apartment',58, '');
arr[arr.length] = new PT(101,'Condo Townhouse',58, '');
arr[arr.length] = new PT(97,'Condominium',58, '');
arr[arr.length] = new PT(110,'Bungalow',81, '');
arr[arr.length] = new PT(120,'Back Split',81, '');
arr[arr.length] = new PT(111,'Chalet',81, '');
arr[arr.length] = new PT(114,'Contemporary',81, '');
arr[arr.length] = new PT(116,'Side Split',81, '');
arr[arr.length] = new PT(112,'Split Entry',81, '');
arr[arr.length] = new PT(118,'1.5 Storey',81, '');
arr[arr.length] = new PT(115,'2 Storey',81, '');
arr[arr.length] = new PT(117,'2.5 Storey',81, '');
arr[arr.length] = new PT(119,'2 Level',81, '');
arr[arr.length] = new PT(122,'3 Level',81, '');
arr[arr.length] = new PT(121,'4 Level',81, '');
arr[arr.length] = new PT(58,'Condominium',0, '');
arr[arr.length] = new PT(135,'Mobile/Mini',0, '');
arr[arr.length] = new PT(150,'Vacant Lot(s)',133, '');
arr[arr.length] = new PT(138,'Cottage / Recreational',0, '');
arr[arr.length] = new PT(133,'Vacant Land',0, '');
arr[arr.length] = new PT(143,'Multi Family',0, '');
arr[arr.length] = new PT(139,'Mobile',135, '');
arr[arr.length] = new PT(140,'Mini',135, '');
arr[arr.length] = new PT(141,'Cottage/Camp',138, '');
arr[arr.length] = new PT(137,'Other',0, '');
arr[arr.length] = new PT(144,'Duplex',143, '');
arr[arr.length] = new PT(145,'Triplex',143, '');
arr[arr.length] = new PT(146,'Fourplex',143, '');
arr[arr.length] = new PT(147,'5 - 8 Unit',143, '');
arr[arr.length] = new PT(148,'9 - 12 Unit',143, '');
arr[arr.length] = new PT(149,'Over 12 Units',143, '');
arr[arr.length] = new PT(134,'Acreages',133, '');
arr[arr.length] = new PT(162,'1',0, '');
arr[arr.length] = new PT(163,'2',162, '');
arr[arr.length] = new PT(164,'3',163, '');
arr[arr.length] = new PT(165,'4',163, '');
var counter = 0;
function PT(ID, Value, ParentID, Parents){
this.ID = ID;
this.Value = Value;
this.ParentID = ParentID;
this.Parents = Parents;
}
function PreSelect(){
var preSelected1 = new Array();
var preSelected2 = new Array();
var preSelected3 = new Array();
preSelected1[0] = 135;
preSelected2[0] = 140; preSelected3[0] = 140;
preSelected1[preSelected1.length] = 0;
setPreselected(document.getElementById('sel1'), preSelected1);
setPreselected(document.getElementById('sel2'), preSelected2);
setPreselected(document.getElementById('sel3'), preSelected3);
}
function setPreselected(sel, arr){
if (!sel || !arr || !arr.length) return;
for (var i = 0; i < sel.options.length;++i){
for (var j = 0; j < arr.length; ++j){
if (sel.options[i].value == arr[j]){
sel.options[i].selected = true;
break;
}
}
}
sel.onchange();
}
function LoadSelects(Source, Level){
counter++;
if (counter > 4)
{
uncheckcat();
}
var selID = Level + 1;
var sel = document.getElementById('sel' + selID);
var sel2 = document.getElementById('sel2');
var sel3 = document.getElementById('sel3');
if (!sel) return;
switch(Level){
case 1:
if (sel2) sel2.options.length = 0;
case 2:
if (sel3) sel3.options.length = 0;
break;
}
var selected = new Array();
if (Source){
for (var i = 0; i < Source.options.length; ++i){
if (Source.options[i].value != "0" && Source.options[i].selected)
selected[selected.length] = Source.options[i].value;
}
}
if (Source && !selected.length) return;
if (Source && Level && sel && (!sel.options.length ||
sel.options[0].value != 'All')){
sel.options[sel.options.length] = new Option('All', 'All');
}else if (!Source && !sel.options.length){
//sel.options[0] = new Option('All', '0');
}
for (var i = 0; i < arr.length; ++i){
var ptype = arr[i];
if (!Source && !ptype.ParentID){
sel.options[sel.options.length] = new Option(ptype.Value,
ptype.ID);
}else{
for (var j = 0; j < selected.length; ++j){
if (ptype.ParentID == selected[j]){
var v = (selected.length > 1)?ptype.Value + ' ' +
ptype.Parents:ptype.Value;
sel.options[sel.options.length] = new Option(v, ptype.ID);
}
}
}
}
if (Source && Level && sel && sel.options.length == 1){
sel.length = 0;
}
}
</script>
<table class="form_main" border="0" cellpadding="2" cellspacing="0"
width="100%">
<tr>
<td width="25%">
<span class="wmessage">*</span><b>Property Type:</b>
</td>
<td width="25%">
<span class="wmessage">*</span><b>Category:</b>
</td>
<td width="25%">
<b>Property Sub-category:</b>
</td>
<td width="25%">
</td>
</tr>
<TR bgcolor="#EDEDED">
<TD class="FormInput" width='25%"' valign="top">
<SELECT id="sel1" style="WIDTH: 173px;"
onchange="LoadSelects(this, 1);" size="5" name="f[sel1]"></SELECT>
</TD>
<TD class="FormInput" width='25%"' valign="top">
<SELECT id="sel2" style="WIDTH: 173px;"
onchange="LoadSelects(this, 2);" size="5" name="f[sel2]"></SELECT></TD>
<TD class="FormInput" width='25%"' valign="top">
<SELECT id="sel3" style="WIDTH: 173px;"
onchange="LoadSelects(this, 3);" size="5" name="f[sel3]"></SELECT></TD>
</TR>
</table>
<script language='javascript'>LoadSelects(null,0);PreSelect();</script>
</body>
</html>
Nisse Engström
> In Opera, there are many BLANK items at the bottom of each catagory level.
>
> How can this be fixed to work with Opera?
[Snip]
> for (var i = 0; i < arr.length; ++i){
> var ptype = arr[i];
> if (!Source && !ptype.ParentID){
> sel.options[sel.options.length] = new Option(ptype.Value, ptype.ID);
I think there have been reports about a bug in
Opera where the options collection is not updated
in a timely manner, and this seems to be the case
here. It works if you add a delay (this is what
works for me; You may need some other delay) after
that 'new Option' thingy.
for (var qyui = 0; qyui < 100000; qyui++);
I have no idea how to fix this properly.
/Nisse