Solved

<select> <option> does not accept style.display='none' under IE. Any Workaround?

Posted on 2009-04-02
5
4,673 Views
Last Modified: 2013-12-08
Following demo code works fine for Firefox. IE6 ignores the update of style.display property.
Would you please help me?

the example code should allow the last option be selected only for the first attempt. Next time the option should be disabled.

n.b. also
document.getElementById("test").options[2].disabled=true
does not work in IE, while is OK with Firefox.
<H2>demo</h2>
<form>
<select id='test' name='test' onChange='document.getElementById("test").options[2].style.display="none"' >
<option id='test1' value='test1'>---test1---</option>
<option id='test2' value='test2'>---test2---</option>
<option id='test3' value='test3'>---test3---</option>
</select>
other inputs
</form>

Open in new window

0
Comment
Question by:ttomaszewicz
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 30

Expert Comment

by:third
ID: 24058112
below is my suggested workaround using a global js variable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Third Santor</title>
<script type="text/javascript">
var flag = false;
function disableOption2(obj){
  if(flag){    
    obj.options[2] = null;
  }
  flag = true;
}
</script>
</head>
<body>
<H2>demo</h2>
<form>
<select id='test' name='test' onChange='disableOption2(this);' >
<option id='test1' value='test1'>---test1---</option>
<option id='test2' value='test2'>---test2---</option>
<option id='test3' value='test3'>---test3---</option>
</select>
<input type="button" value="Click" onclick="alert(this.form.test.value)" />
other inputs
</form>
</body>
</html>

Open in new window

0
 
LVL 30

Expert Comment

by:third
ID: 24058128
i added one line checking. update the script to
<script type="text/javascript">
var flag = false;
function disableOption2(obj){
  if(flag){    
    if(obj.options.length==3){
      obj.options[2] = null;
	}
  }
  flag = true;
}
</script>

Open in new window

0
 

Author Comment

by:ttomaszewicz
ID: 24059216
This works! Thanks!
Is there a way to revert the last option - to be visible and selectable again? e.g. after pressing a button?
0
 
LVL 30

Accepted Solution

by:
third earned 100 total points
ID: 24060328
sure here,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Third Santor</title>
<script type="text/javascript">
var flag = false;
function disableOption2(obj){
  if(flag){    
    if(obj.options.length==3){
      obj.options[2] = null;
        }
  }
  flag = true;
}
 
function restoreLastOption(obj){
  if(obj.options.length==2){
    obj.options[2] = new Option('---test3---', 'test3');
	flag = false;
  }
}
</script>
</head>
<body>
<H2>demo</h2>
<form>
<select id='test' name='test' onChange='disableOption2(this);' >
<option id='test1' value='test1'>---test1---</option>
<option id='test2' value='test2'>---test2---</option>
<option id='test3' value='test3'>---test3---</option>
</select>
<input type="button" value="Click" onclick="alert(this.form.test.value)" />
<input type="button" value="Restore 3rd Option" onclick="restoreLastOption(this.form.test);" />
other inputs
</form>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:ttomaszewicz
ID: 31565963
This is what I needed. Thank you for your help.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Google Tag Manager - Add Trigger Using Div class 22 61
Date on a table 16 35
Asp response.write to clients 6 34
assigning javascript variable to php variable 8 42
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question