467,921 Members | 1,384 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,921 developers. It's quick & easy.

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

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.
Jul 23 '05 #1
  • viewed: 18128
Share:
3 Replies
Iain Hallam wrote:
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]

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

Mick
Jul 23 '05 #2
Mick White wrote:
Iain Hallam wrote:
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]


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.
Jul 23 '05 #3
Iain Hallam wrote:
Mick White wrote:
Iain Hallam wrote:
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]


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.


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">
<!-- Hidded to provide source for other option lists -->
<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>
--
Rob
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Markus Ernst | last post: by
2 posts views Thread by LC's No-Spam Newsreading account | last post: by
6 posts views Thread by Chris Fink | last post: by
1 post views Thread by Vyacheslav Lanovets | last post: by
9 posts views Thread by Man-wai Chang | last post: by
1 post views Thread by sweetpotatop | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.