I am trying to only show certain items in a <select> depending on the value of a radio button group.
Simplified code:
<input name="repfilter" type="radio" value="1" onclick="filterMenu(1);" /> Detail
<input name="repfilter" type="radio" value="2" onclick="filterMenu(2);" /> Summarys
<input name="repfilter" type="radio" value="3" onclick="filterMenu(3);" /> Graphs
<input name="repfilter" type="radio" value="4" onclick="filterMenu(4);" checked="checked" /> All
<select name="report" id="report">
<option value="SL1">Option 1</option>
<option value="SL2">Option 2</option>
<option value="CH21">Option 3</option>
<option value="AC25">Option 4/option>
.....
</select>
<script>
function filterMenu(filter) {
var sel = document.forms['form1'].re
var val;
for (var i = 0; i < sel.length; i++) {
val = sel.options[i].value;
switch (filter) {
case 1 :
if (val.substr(0, 2) == 'CH') sel.options[i].style.displ
break;
case 2 :
if (val.substr(0, 2) == 'AC') sel.options[i].style.displ
break;
case 3 :
if (val.substr(0, 2) == 'SL) sel.options[i].style.displ
break;
default :
sel.options[i].style.displ
break;
}
}
}
</script>
----
This works great in Firefox, but doesn't happen in IE - it doesn't error, but setting the display style property in IE does nothing whether you do it statically or dynamically it seems. I've tried using visibility too, but to no avail.
How can I do this without: 1) Creating 4 different select lists and showing/hiding them, 2) Adding/removing elements using JavaScript.
I just want to show/hide options within a select list cross-browser.
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
I'm trying to remove from display rather than just disable (as this would remain in display even though greyed out).
Can anyone explain why IE doesn't render the display style attribute properly for <option> (even though it allows you to set it)?
I am still hoping someone will be able to tell me how to hide dropdown options in IE, however if not then I will accept an explanation of why it is impossible (if it is!).
u cannot hide options.. instead u can remove and add them dynamically
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<select id = "sel">
<option value = "1">one</option>
<option value = "2">two</option>
</select>
<script>
document.getElementById('s
</script>
</BODY>
</HTML>
woodpd,
Just because something is in the standards doesn't mean IE supports it (even FireFox doesn't support everything, and has it's quirks).
You're solution shouldn't be hiding options, but rather adding options depending on the checkbox selected. When a checkbox is checked, remove the all the options, then add the options associated with the checkbox.
Cheers,
Thanks for the ideas guys.
1. The colour idea isn't really a help as it would leave blanks and the whole idea is to shorten this list (as its LONG and is constantly changing).
2. I realise IE doesn't support all standards, I was just wondering why it wouldn't support 'display' for <option> as it does for pretty much everything else, sounds like an anomaly.
3. Adding and removing elements I can already do, but not applicable to this instance though (as mentioned) because of the large amount of (and constantly changing) elements in the list, it would become unmanageable and incredibly messy.
woodpd,
Store the elements in a multi-dimensional array. You could use a key based on the radio button for the first element, and keep the array manageable.
eg
{[radio1, option1],[radio1, option2],[radio1, option3],[radio2, option4],[radio3, option5],[radio3, option5]}
This way you could just parse the first dimension of the array for the radio button value, and quickly return the options. It would also keep maintenance down as the variables would be stored together and would be obvious as to where they belong. You could also easily generate these dynamically via JSP.
Cheers
try this
<form name="form1">
<input name="repfilter" type="radio" value="1" onclick="filterMenu(1);" /> Detail
<input name="repfilter" type="radio" value="2" onclick="filterMenu(2);" /> Summarys
<input name="repfilter" type="radio" value="3" onclick="filterMenu(3);" /> Graphs
<input name="repfilter" type="radio" value="4" onclick="filterMenu(4);" checked="checked" /> All
<select name="report" id="report">
<option value="SL1">Option 1</option>
<option value="SL2">Option 2</option>
<option value="CH21">Option 3</option>
<option value="AC25">Option 4</option>
</select>
<select name="reportDummy" id="reportDummy" size="1" style="display:none">
</select>
</form>
<script>
var sel = document.forms['form1'].re
var selDummy = document.forms['form1'].re
for (var i = 0; i < sel.options.length; i++)
selDummy.options[selDummy.
function filterMenu(filter) {
var sel = document.forms['form1'].re
var selDummy = document.forms['form1'].re
sel.options.length=0
for (var i = 0; i < selDummy.length; i++) {
val = selDummy.options[i].value
switch (filter) {
case 1 :
if (val.substr(0, 2) != 'CH') sel.options[sel.options.le
break;
case 2 :
if (val.substr(0, 2) == 'AC') sel.options[sel.options.le
break;
case 3 :
if (val.substr(0, 2) == 'SL') sel.options[sel.options.le
break;
default :
sel.options[sel.options.le
break;
}
}
}
</script>
I used this idea to get to a solution a bit closer to what I was hoping for so I'm giving you the points. For the sake of the PAQ, here is the final answer in simplified format.
<script>
function filterMenu(filter) {
var selAll = document.forms['fmReportSe
var sel = document.forms['fmReportSe
var val, txt;
//remove all current options
var selsize = sel.options.length;
for (var i = 0; i < selsize; i++) {
if (sel.remove) sel.remove(0); else sel.options[0] = null;
}
//add in options matching filter criteria
for (var i = 0; i < selAll.options.length; i++) {
val = selAll.options[i].value;
txt = selAll.options[i].text;
switch (filter) {
case 1 :
if (val.substr(0, 2) != 'SL') sel.options[sel.options.le
break;
case 2 :
if (val.substr(0, 2) == 'IS') sel.options[sel.options.le
break;
case 3 :
if (val.substr(0, 2) == 'CH') sel.options[sel.options.le
break;
default :
sel.options[sel.options.le
break;
}
}
}
</script>
<body onload="filterMenu(4)">
<form name="fmReportSelect" id="fmReportSelect">
<input name="repfilter" type="radio" value="1" onclick="filterMenu(1);" /> Detail
<input name="repfilter" type="radio" value="2" onclick="filterMenu(2);" /> Summarys
<input name="repfilter" type="radio" value="3" onclick="filterMenu(3);" /> Graphs
<input name="repfilter" type="radio" value="4" onclick="filterMenu(4);" checked="checked" /> All
<select name="all_reports" id="all_reports" style="display: none;">
<option value="SL1">Option 1</option>
<option value="SL2">Option 2</option>
<option value="CH21">Option 3</option>
<option value="IS25">Option 4</option>
...etc...
</select>
<select name="report" id="report>
</select>
</form>
Business Accounts
Answer for Membership
by: arantiusPosted on 2004-12-13 at 17:36:43ID: 12815515
woodpd,
http://www.w3.org/TR/html4
the <option> tag should support the disabled attribute.
Of course, IE doesn't support that.
> How can I do this without: 1) Creating 4 different select lists and showing/hiding them, 2) Adding/removing elements using JavaScript.
I don't think that's possible.