Solved

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

Posted on 2009-04-02
5
4,651 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
  • 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

948 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now