Solved

Use an onclick Button to de-select a selection (Works in Mozilla but not I.E.)

Posted on 2007-03-29
8
322 Views
Last Modified: 2012-08-13
I usually code my javascript in Mozilla because of the better err console.

I coded the following and it works fine in Mozilla but not in I.E.  I never experienced this before.
I just want to give the user a chance to deselect a specfic selection from one drop-down instead of making them clear the whole page and starting over.

<script type="text/javascript">
                  
function selAllBP() {
for(var i=0;i<document.user.userrole.length;i++)
  document.user.userrole[i].selected=false;
}
</script>

*******
I am using in Coldfusion, I am attaching code:

<script type="text/javascript">
                  
function selAllBP() {
for(var i=0;i<document.user.userrole.length;i++)
  document.user.userrole[i].selected=false;
}
</script>

<body>
<cfform name="user">
<table border="1" align="center">
<tr>
<td colspan="2">Select Role:</td>
</tr>
<tr>
<td>User Role:</td>
 <td>
      <select name="userrole"  bgcolor="Ivory" size="3" required="yes" message="User Role - Required Field.
      Please Select a User Role">
                  <option value="" selected></option>
                  <option value="USER">USER</option>      
                  <option value="SUPERUSER">SUPERUSER</option>
                  <option value="APPROVER">APPROVER</option>                  
      </select>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<cfinput  name="deselect" type="button" value="Deselect" onclick="selAllBP();">
</td>
</tr>
0
Comment
Question by:mahpog
  • 5
  • 2
8 Comments
 

Author Comment

by:mahpog
Comment Utility
One more comment.

If I change the select to allow multiple, it works in Mozilla and I.E. ???  I am guessing sytnax error for only one select verus several
0
 

Author Comment

by:mahpog
Comment Utility
In I.E. works when I code multiple="no" - but let's me select more than one option.

Mozilla works 100% exactly as you would expect.

There must be better sytnax.
0
 
LVL 36

Expert Comment

by:Zyloch
Comment Utility
I'm not surprised it would do this. I do not know which browser shows the standards-correct behavior (maybe both do!), but in ordinary drop downs, it is impossible to not select an option.

In your case, the field seems to be required, so I don't see why it matters since you have an empty element up top. Instead, I would suggest changing your deselect function to just changing the selectedIndex to the top option.
0
 

Author Comment

by:mahpog
Comment Utility
Zyloch, I took your advise, and it did not work.

Is there a better way to code the javascript to deselect an option than what I did?  
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:mahpog
Comment Utility
I understand that if I require the selection, something has to be selected.

But I also have a drop-down that the select is optional. the user made a selection, filled the remaing of a page of data, and realized that he does not want the selected option from the one drop-down, and would like to deselect just that one option, and not have to clear the whole page and start over.
0
 
LVL 36

Expert Comment

by:Zyloch
Comment Utility
I see your dilemma. Then, the only way I can think of is to work around it. Create a separate variable for each drop down to hold the value of the current selected index of the drop down. Give it the attribute multiple="multiple". On its onclick, do the following:

onchange="this.options[oldValue].selected=false; oldValue=this.options.selectedIndex;"

Making sure to define a

var oldValue = 0;

somewhere globally. It's an ugly fix, but I don't know of a better way.
0
 
LVL 19

Accepted Solution

by:
dakyd earned 500 total points
Comment Utility
How about changing the selectedIndex on the drop down to -1?  It's a bit of a hack, but it does work on IE6 and Firefox 2.0:

function selAllBP()
{
  document.user.userrole.selectedIndex = -1;
}

I don't have any other browsers to test on (that means no IE7), but I can't imagine the js engine changing that much from IE6 to IE7.  Anyhow, hope that helps.
0
 

Author Comment

by:mahpog
Comment Utility
Dakyd,

You have got me laughing really hard! Oh my gosh! I tried your suggestion and it definitely does unselect the selection and the rest of the page is left alone.
Thanks!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

728 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

10 Experts available now in Live!

Get 1:1 Help Now