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
