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

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>
mahpogAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mahpogAuthor Commented:
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
mahpogAuthor Commented:
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
ZylochCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

mahpogAuthor Commented:
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
mahpogAuthor Commented:
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
ZylochCommented:
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
dakydCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mahpogAuthor Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.