Thanks to all the people who have tested and used the multiselect before. I’ve taken the improvements, suggestions, and bug-fixes and am now happy with a new version of it.

Multiselect takes a normal <select multiple="multiple"> and converts it dynamically into a more user-friendly interface.

An example of the new and improved version can be found here.

Points of note

• you can now “select all” and “select none”
• a new “reset” link brings the select box back to how it was originally
• the script works even if you have more than one multiselect box

caveats: the name of the <select> must end in ‘[]‘. While this is specifically against W3C rules, there does not seem to be any alternative method to pass on multiple values for one variable.

To use, simple download the script and link to it in your webpage.

This script should work in all major browsers. If it doesn’t work in the one you’re testing in, then please alert me.

This one had me stumped for half an hour… In my AJAX shopping cart, I return a file which is delimited by carriage returns. Some of the lines of the file may be blank. On the client side, I then split that into an array. Firefox was giving me the correct array, but IE6 was dropping all the blank lines.

It took me a while, but I finally figured it out. It seems that if you split using the method file.split(/\n/), then IE6 rips up that regexp and replaces it with file.split(/\n+/).

Here is some sample code – this works perfectly in Firefox, but the problem is demonstrated in the first three alerts for IE6.

alert('one\ntwo\n\nthree'.split(/\n/));
alert('one\ntwo\n\n\nthree'.split(/\n/));
alert('one\ntwo\n\n\n\nthree'.split(/\n/));
alert('one\ntwo\n\nthree'.split('\n'));

As you can see, the solution is to split on the string '\n' instead of the regexp /\n/, although that obviously is not ideal in all cases.

As usual, we web developers can thank Microsoft for the hell that we go through.

If you use the addRule() function in IE6 to add a style element, then be aware that IE6 does not seem to understand the usage of commas in selectors. It will return an “invalid argument” error.

In CSS, the comma in a selector is used to say “the following styles apply to each of these comma-delimited items”. So, for example. a,h1{text-decoration:underline} should underline anchors and header-ones.

Here is a function to add rules for both IE and Firefox. It took me fifteen minutes of debugging to figure out the comma bug, but that’s fixed in the below code.

function addRule(rule){
 if(document.styleSheets&&document.styleSheets.length){
  var a=document.styleSheets[0],arr=rule.replace(/}.*/,'').split('{'),arr2,i;
  if(a.insertRule)a.insertRule(rule,0);
  else if(a.addRule){
   arr2=arr[0].split(/,/);
   for(i=0;i<arr2.length;i++)a.addRule(arr2[i],arr[1]);
  }
 }
}

The above is called like this: addRule('a,h1{text-decoration:underline}'); in JavaScript. At the moment, it requires that a stylesheet be attached, but that requirement can easily be hacked away.