Multiple Selection Listbox Javascript Problem in MS Internet Explorer

internet-explorer-ieLast 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>

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>

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>


10 Comments

  • Marcel 7 April, 2009, 18:34

    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 !!!!!!!!

  • Deborah 16 May, 2009, 2:16

    Write about more IE work-arounds for Ajax and javascript with PHP and Mysql
    thanks

  • Viral Patel 16 May, 2009, 16:20

    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.

  • BJS 3 December, 2009, 17:30

    Nice fix. Thanks for sharing it.

  • Samantha Crane 9 December, 2009, 21:35

    Thank-you so much – you’re a life saver! (Or certainly a several hours of my life saver!)

  • Raph 11 June, 2010, 11:59

    Thank you so much!!

  • sridevi 6 October, 2010, 0:36

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

  • canhnv 19 October, 2010, 12:34

    Thank you so much!!!

  • Ashish Kulkarni 28 November, 2010, 19:06

    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).

  • Tristan ARNAULT 31 March, 2011, 18:14

    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 Reply

Your email address will not be published. Required fields are marked *

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current day month ye@r *