Multiple Selection Listbox Javascript Problem in MS Internet Explorer

by · March 21, 2009

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>

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)
Get our Articles via Email. Enter your email address.

Tags:

You may also like...

10 Comments

  1. Marcel says:
    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 !!!!!!!!

    Reply
  2. Deborah says:
    16 May, 2009, 2:16  

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

    Reply
  3. Viral Patel says:
    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.

    Reply
  4. BJS says:
    3 December, 2009, 17:30  

    Nice fix. Thanks for sharing it.

    Reply
  5. Samantha Crane says:
    9 December, 2009, 21:35  

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

    Reply
  6. Raph says:
    11 June, 2010, 11:59  

    Thank you so much!!

    Reply
  7. sridevi says:
    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

    Reply
  8. canhnv says:
    19 October, 2010, 12:34  

    Thank you so much!!!

    Reply
  9. Ashish Kulkarni says:
    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).

    Reply
  10. Tristan ARNAULT says:
    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

    Reply

Leave a Reply

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

Follow: