Internet Explorer [Object Error] in Select.options Manipulation

quakerstate79

01-26-2007, 07:46 PM

Hey guys, the following code takes a highlighted option from a select list and moves it up or down in the list according to the argument passed. Simple enough. It works exactly as expected in Fire Fox. However, in Internet Explorer it gives me [object error](object does not support that method) at the designated lines.

Here's the code

/**********************************************************
moveUsedFields() takes the selected field moves it either
up or down depending on the argument
***********************************************************/
function moveUsedFields(updown)
{
var used_columns = document.getElementById("used_column_names");
var si = 0;
try{si = used_columns.options.selectedIndex;}catch(e){si = null;}

//alert(si);
try
{
if(used_columns.options[si] != null)
{
if(updown == "up" && si>0)
{
var temp = used_columns.options[si-1];
var temp2 = used_columns.options[si];
used_columns.options[si-1] = temp2;///****this is the problem line******//
used_columns.options.add(temp,si);
used_columns.options.selectedIndex = si-1;
}
else if(updown == "down" && used_columns.options[si+1] != null)
{
var temp = used_columns.options[si+1];
var temp2 = used_columns.options[si];
used_columns.options[si+1] = temp2;
used_columns.options.add(temp,si);
used_columns.options.selectedIndex = si+1;
}

}
}catch(e){}

}

I have tried to see if the contents of used_columns.options[si-1].value or temp2.value are valid, and they are the correct values. I'm kinda stumped here. I was hoping that someone that knows more details about how Internet explorer would interpret this script could clue me in. Failing that, does anyone know a website that i could read more about the methods that Internet Explorer does support for the select.option object?

Thanks for your time reading this,

-Q

quakerstate79

01-26-2007, 10:29 PM

bump, anyone know a good website? I've tried to google it, but not getting anything interesting yet.

-Q

vwphillips

01-26-2007, 11:51 PM

david_kw

01-27-2007, 05:30 AM

Wow, that was painful. It's kind of embarrassing to say how much time I spent on this one. But at some point I just couldn't give up anymore.

Anyway, near as I can tell the thing is that IE gets all upset if you try to have more than one version of the same option in the array. So the trick is once the option has been pulled in to the temp variable that you set that spot in the array to null which actually deletes it from the array.

<html>
<head>
<title>Junque</title>
<script type="text/javascript">
function moveUsedFields(updown)
{
var used_columns = document.getElementById("used_column_names");
var si = 0;
try{si = used_columns.options.selectedIndex;}catch(e){si = null;}

try
{
if(used_columns.options[si] != null)
{
if(updown == "up" && si>0)
{
var temp = used_columns.options[si];
var temp2 = used_columns.options[si-1];
used_columns.options[si] = null;
used_columns.options[si-1] = null;
used_columns.options.add(temp2,si-1);
used_columns.options.add(temp,si-1);
used_columns.selectedIndex = si-1;
}
else if(updown == "down" && used_columns.options[si+1] != null)
{
var temp = used_columns.options[si+1];
var temp2 = used_columns.options[si];
used_columns.options[si+1] = null;
used_columns.options[si] = null;
used_columns.options.add(temp2,si);
used_columns.options.add(temp,si);
used_columns.selectedIndex = si+1;
}

}
}catch(e){}

}
</script>
</head>
<body>
<div>
<button onclick="moveUsedFields('up');">Up</button>
<button onclick="moveUsedFields('down');">Down</button>
<br />
<select id="used_column_names" size="7">
<option>Opt 1</option>
<option>Opt 2</option>
<option>Opt 3</option>
<option>Opt 4</option>
<option>Opt 5</option>
</select>
</div>
</body>
</html>

Hopefully that helps. I learned more about select and options than I ever wanted to know. :)

david_kw

quakerstate79

01-29-2007, 06:14 PM

well, that makes sense. I took the code home over the weekend, and didn't think to check back on the forums. Here is the workaround code that I came up with independently that works for both firefox and pos IE. I hope this discussion is able to help someone else down the road, because this is a tremedously frustrating and subtle problem to troubleshoot.

here is my workaround code.

function moveUsedFields(updown)
{
var used_columns = document.getElementById("used_column_names");

try{var si = used_columns.options.selectedIndex;}catch(e){si = null;}

try
{
if(used_columns.options[si] != null)
{
if(updown == "up" && si>0)
{

var temp = used_columns.options[si-1].value;
temp = new Option(temp,temp);

var temp2 = used_columns.options[si].value;
temp2 = new Option(temp2,temp2);

used_columns.options[si-1] = temp2;
used_columns.options[si] = temp;
used_columns.options.selectedIndex = si-1;

}
else if(updown == "down" && used_columns.options[si+1] != null)
{

var temp = used_columns.options[si+1].value;
temp = new Option(temp,temp);

var temp2 = used_columns.options[si].value;
temp2 = new Option(temp2,temp2);

used_columns.options[si+1] = temp2;
used_columns.options[si] = temp;
used_columns.options.selectedIndex = si+1;

}

}
}catch(e){alert(e);}

}

Thanks to the previous posters for there explanation of the underlying issue.

-Q