Equivalent to display:none for <option> in IE?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Iain Hallam - 26 Feb 2005 17:54 GMT

Hi.

I've been using display:none on the style property of some <option>
elements in my forms, which works fine with Mozilla - as expected it
removes the option from my dropdown (although it still exists in the
code). Is there an equivalent in IE?

The reasoning behind this is that I want users to rank objects using a
<select> for each place (see below), and to remove the choice of earlier
objects from <select> drop-downs later in the list.

1st place: [<Select> with option 2 chosen]
2nd place: [<select> with option 4 chosen]
3rd place: [<select> --> Option 1
Option 3
Option 5
Option n]

Thanks,

Iain.

Reply to this Message

Mick White - 26 Feb 2005 19:31 GMT

> Hi.
>
[quoted text clipped - 13 lines]
> Option 5
> Option n]

Have you tried,[ drumroll ...], the option's "remove()" method?

Mick

Reply to this Message

Iain Hallam - 26 Feb 2005 22:25 GMT

>> I've been using display:none on the style property of some <option>
>> elements in my forms, which works fine with Mozilla - as expected it
[quoted text clipped - 13 lines]
>
> Have you tried,[ drumroll ...], the option's "remove()" method?

The thing is... if the user selects Option 5 in 2nd place, Option 4
needs to reappear in lower <select> drop-downs, and Option 5 needs to be
removed. Is it possible to store the removed <option> and put it back later?

- Iain.

Reply to this Message

RobG - 28 Feb 2005 06:58 GMT

>>> I've been using display:none on the style property of some <option>
>>> elements in my forms, which works fine with Mozilla - as expected it
[quoted text clipped - 20 lines]
>
> - Iain.

The following may do most of what you want. It uses a hidden
select to hold the default values, then removes all of the
selected options in all the other selects except for the one it's
selected in. It adds options back in if the currently selected
option is changed by cloning the appropriate option from the
hidden select.

It tries to keep the options in order, but it doesn't work fully.
Note I've used ids to hold an index to each option - that's
because IE doesn't let you reference an option using a name, and
Firefox doesn't let you get the name of a referenced option.

i.e.

document.forms['answers'].elements['a-1'].options['a-1-1'];

works in Firefox but gives 'undefined' in IE.

document.getElementById('a-1-1').name

works in IE but gives 'undefined' in Firefox.

I had similar issues with add/remove option, so I've used
insert/remove child instead. The onchange doesn't always fire in
Firefox either.

Have fun.

<html><head><title>Decreasing options</title>

<script type="text/javascript">
var selArray = []; // Array of select elements
var selList = []; // Array of selected option numbers

// Fill arrays
function initSelList(fName) {
var el = document.forms[fName].elements;
for (var i=0, len=el.length; i<len; i++) {
if (el[i].nodeName.toLowerCase() == 'select') {
selArray[i] = el[i];
selList[i] = 0;
}
}
// Reset selections
document.forms[fName].reset();
}

function updateSelects(s){
// index of changed select
var sIdx = s.name.split('-')[1];
// index of selected option
var sSelIdx = s[s.selectedIndex].id.split('-')[2];

// If the previous selected option is not zero,
// put it back into all the other selects
if (selList[sIdx] != 0) {
for (var j=1; j<selList.length; j++) {
if (j != sIdx){
// Clone the equivalent node from select[0]
var oOpt = selArray[0][selList[sIdx]].cloneNode(true);
// Change its id
oOpt.id = 'a-' + j + '-' + selList[sIdx];
// Append it to the option list
selArray[j].insertBefore(oOpt,selArray[j][selList[sIdx]]);
}
}
}

// If the current selection is not zero, remove it
// from all other selects
if (sSelIdx != 0){
for (var j=1; j<selList.length; j++) {
if (j != sIdx){
if (document.getElementById) {
var xOpt = document.getElementById('a-'+j+'-'+sSelIdx);
} else if (document.all) {
var xOpt = document.all('a-'+j+'-'+sSelIdx);
}
selArray[j].removeChild(xOpt);
}
}
}
// Update select list with current select
selList[sIdx] = sSelIdx;
}
</script>
</head>
<body onload="initSelList('answers');">
<form action='' name="answers">

<select name="a-0" style="display: none;" onchange="
updateSelects(this);
">
<option id="a-0-0" name="a-0-0" selected></option>
<option id="a-0-1" name="a-0-1">answer 1</option>
<option id="a-0-2" name="a-0-2">answer 2</option>
<option id="a-0-3" name="a-0-3">answer 3</option>
</select>
<select name="a-1" onchange="updateSelects(this);">
<option id="a-1-0" name="a-1-0" selected></option>
<option id="a-1-1" name="a-1-1">answer 1</option>
<option id="a-1-2" name="a-1-2">answer 2</option>
<option id="a-1-3" name="a-1-3">answer 3</option>
</select>
<select name="a-2" onchange="updateSelects(this);">
<option id="a-2-0" name="a-2-0" selected></option>
<option id="a-2-1" name="a-2-1">answer 1</option>
<option id="a-2-2" name="a-2-2">answer 2</option>
<option id="a-2-3" name="a-2-3">answer 3</option>
</select>
<select name="a-3" onchange="updateSelects(this);">
<option id="a-3-0" name="a-3-0" selected></option>
<option id="a-3-1" name="a-3-1">answer 1</option>
<option id="a-3-2" name="a-3-2">answer 2</option>
<option id="a-3-3" name="a-3-3">answer 3</option>
</select>
</form>
</body></html>

Signature

Rob

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / February 2005

Equivalent to display:none for <option> in IE?