By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,231 Members | 1,279 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,231 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
3 Replies


P: n/a
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

P: n/a
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

P: n/a
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.