Multiple Selection Listbox Javascript Problem in MS Internet Explorer
Last night I came across very weird problem of JavaScript. I wrote a JavaScript code to select all the option of the list. Let’s take following example for demonstration.

HTML code:

<form name="data_form" method="post" action="submit_page.php">
<SELECT id='numbers' size=4>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
</SELECT></pre>
<br>
<SELECT id='alpha' size=4>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</SELECT>
<br>
<INPUT id='chkNumAll' type=checkbox  onclick=SelAll(this,document.getElementById('number')); > select all numbers
<INPUT id='chkAlphaAll' type=checkbox  onclick=SelAll(this,document.getElementById('alpha'));> select all alphabets
</form>

Code language: HTML, XML (xml)
Now, as you can see, we haven’t specify “multiple” attribute of both the select tag. So, by default it treated as false. Means you cannot select multiple option from the select box. Now I wrote following JavaScript code and it’s working fine with all the major browsers like Mozilla FireFox, Safari 3 and Safari 4, Google Chrome, even in IE 7+ also but surprisingly it is not working in IE 6 (Internet Explorer 6). Situation became more weird when I place or un-commented alert(1) at line 6 and it worked correctly in Internet Explorer 6 too!!

JavaScript code:

<script language=javascript>
function SelAll(chk,sellist){
   var len=sellist.length
   if(chk.checked==true){
    sellist.multiple=true
   // alert(1)
   sellist.disabled=true
 for(var i=0;i<len;i++){
       sellist.options[i].selected=true
    }
  } else{
 sellist.multiple=false
    sellist.disabled=false
    for(var i=1;i<len;i++){
      sellist.options[i].selected=false
    }
  }
}
</script>

Code language: JavaScript (javascript)
Then I modified above javascript code a bit and tested on all the browsers including IE 6 and it was working fine. I called focus() function for the particular list box. I don’t know the reason why it works fine in IE 6 when we put focus function.

Modified JavaScript code:

<script language=javascript>
function SelAll(chk,sellist){
   var len=sellist.length
   if(chk.checked==true){
 sellist.multiple=true
 sellist.focus();
 sellist.disabled=true
 for(var i=0;i<len;i++){
  sellist.options[i].selected=true
 }
  } else{
 sellist.multiple=false
 sellist.disabled=false
 for(var i=1;i<len;i++){
  sellist.options[i].selected=false
 }
  }
}
</script>

Code language: JavaScript (javascript)

View Comments

  • Thanks for posting this, I was pulling my hairs out trying to get that piece of redmond shit to run my code correctly.

    THANK YOU for this post !!!!!!!!

  • Hi Marcel,
    Thanks for the comment. You may want to subscribe for RSS feed of this website to stay in touched with different technologies.

    Hi Deborah,
    Thanks for your comment. I will sure try to write about PHP/Ajax/Javascript. You may like to contribute to this website by sending your articles. It will be published under your username.

  • could never have thought of this to fix.. it works.. Like marcell, I too had almost pulled my hair on this bug..
    Thanks

  • Thank you so much, I've been tearing my hair about this bug for a day or two and your solution works. I was creating the options and selecting them (if required) in the same step, which caused another problem: the didn't expand to fit the length of the displayed options. To solve that, I split the code into two: first create the options, apply your hack and then set the selected flag (which worked perfectly).

  • Hi,

    Thanks for the tips.
    My problem was a little bit more complex because I was trying to do the same than you but on a select with "display:none".
    And Internet Explorer 6 does not like focusing on hidden elements (fatal javascript error).
    This is my solution based on yours for that specific case :

    function selectAllOption(obj) {
    // obj here is an hidden select box
    var len = obj.options.length;
    obj.multiple = true;
    obj.style.display = 'inline'; // IE6 Hack
    obj.focus(); // IE6 Hack
    for (var i=0; i < len; i++) {
    obj.options[i].selected = true;
    }
    obj.style.display = 'none'; // IE6 Hack
    }

    So the tips is to display the select box just before focusing it, and just after hidding it again. This solution does not change the way the user sees the webpage.

    Posting this tips here in case of someone encounters the same problem :)

    See ya,

    Tristan ARNAULT

Leave a Comment
Share
Published by
Gaurav Patel
Tags: internet explorer JavaScript javascript problem listbox
16 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

5 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

5 years ago