Link to home
Start Free TrialLog in
Avatar of woodpd
woodpd

asked on

Hiding dropdown options in IE

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'].report;
  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.display = 'block'; else sel.options[i].style.display = 'none';
      break;
      case 2 :
        if (val.substr(0, 2) == 'AC') sel.options[i].style.display = 'block'; else sel.options[i].style.display = 'none';
      break;
      case 3 :
        if (val.substr(0, 2) == 'SL) sel.options[i].style.display = 'block'; else sel.options[i].style.display = 'none';
      break;
      default :
        sel.options[i].style.display = 'block';
      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.
Avatar of arantius
arantius

woodpd,

http://www.w3.org/TR/html401/interact/forms.html#edef-OPTION
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.
Avatar of woodpd

ASKER

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('sel').remove(0);
</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,
Please replace "checkbox" with "radio button" in my previous reply...
a simple way wud be...
to change the forground color equivalent to the background color... the options will not be seen...:))
The only problem with this solution archrajan is that there would be a blank space where the option is, and could still be seen.   or are you just having fun?  I left my sense of humour at home today ;)
Avatar of woodpd

ASKER

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,
> it would become unmanageable and incredibly messy.

Actually, if you define the script properly, storing the values in a 3-dimensional array, it should be pretty easy to maintain.  Perhaps the 4th dimension could store when it displays and when not.
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
ASKER CERTIFIED SOLUTION
Avatar of GwynforWeb
GwynforWeb
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of woodpd

ASKER

I think you might be onto something a little closer to what I was looking for. I'll take a look at this as at first glance I think I like your idea.
Avatar of woodpd

ASKER

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['fmReportSelect'].all_reports;
  var sel = document.forms['fmReportSelect'].report;
  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.length] = new Option(txt, val);
      break;
      case 2 :
        if (val.substr(0, 2) == 'IS') sel.options[sel.options.length] = new Option(txt, val);
      break;
      case 3 :
        if (val.substr(0, 2) == 'CH') sel.options[sel.options.length] = new Option(txt, val);
      break;
      default :
        sel.options[sel.options.length] = new Option(txt, val);
      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>