There have been a few fixes and upgrades to the multiselect code since the last announcement.
For those of you new to the idea, the multiselect is a tool for providing a more friendly version of HTML’s <select multiple>, using checkboxes, instead of the clumsy CTRL+click method that was there before-hand.
To make sure of backwards-compatibility, the script uses what has become known as “Unobtrusive JavaScript” – ie; if you don’t have JavaScript enabled, it will make little difference to the end result.
here is the example.
The new code adds the following functions:
- The
all, none, resetlinks may be turned off by changing theshow_toplinksvariable in the source tofalse. - The script does not force you to use ‘
[]‘ symbols. This is good news for JSP developers, and other users of non-PHP languages. - You may now mark individual
<option>s asdisabled.
As usual, instructions for use are:
- Get your multiple select working properly in plain HTML first.
- Link to the external script.
Thank you to all the commenters on the previous version.
Excellent work, but I have come across a problem. The script seems to render the ID tag useless, meaning I cannot use getElementById to select certain values.
[...] ascript and CSS to give a more polished look to fors. Not sure on compatability. See also this link for cool “all” and “none” additions to combo boxes.
[...]
Lewis, the ID tag does become useless, yes. This is because a totally new element group is created, and the original select-box is destroyed.
This is meant to be an easy-to-insert usability improvement for select-boxes. It would be very difficult to make it behave exactly like the original selectbox.
You should be able to change your source code to affect the newly-created checkboxes instead of the old select-box.
Hi, Thanks, I fixed the problem by including the javascript to change the select boxes at the bottom of the page.
Just ot let you know, your site has errors in MSIE, and also the labels don’t work in MSIE.
what does this mean: and is there sameple code?
Lewis says:
Hi, Thanks, I fixed the problem by including the javascript to change the select boxes at the bottom of the page.
oh .. i think i understand… um.. will some browsers have a problem without having the id tag? Is this why i was havcing problems passing the values from my origianal (and seprate) form to submition (seperate) page? if so.. how can i get past that ? or work around it?
(are there any other ramificaitons?)
very nice example… should work on the newest browsers…
somebody tried with a linux or mac OS browser ??? i am using a win-firefox browser…
greetings from germany
I wrote it using Firefox in Linux.
A quick test shows me that it renders weirdly in Konqueror. Thanks, Citos – I’ll fix that later today (and Stripe-man’s class thing as well)
…dont worry… the ID-tags are W3C-Konform… ist a standard vor HTML v4.0…all the leading and being used browser can handle them…
keep typing…
Works OK in Firefox on MacOSX 10.2. Thanks Kae!
any updates lately!! ???
um… I was looking to see what option or var i change so that it ONLY looks for selects with ‘[]‘ in the name. before this line worked:
if(ms.name.substring(ms.name.length-2,ms.name.length)==’[]‘){
but things have changed a bit since last i tried to use it…
THanks for any assist!!
lol! patience! i’m afraid i’m incredibly tied up with a few things at the moment which i think are higher priority for myself at the moment. working on curves for firefox, release .4 of webme, and a pattern recognition net for a gardening robot.
oh ok! LOL I didnt mean anything by it!! I thought that paticular feature was already there and i was over looking it!
Will wait patiently!
Excellent code, thanks for your efforts in making a really unfriendly interface into a usable one.
I had an issue with the options overflowing the border of the control when show_toplinks=false. It looks like when show_toplinks=true you subtract four more pixels if it an IE browser. I put in place the same math for when show_toplinks=false by changing the line to the following:
newmultiselect.style.height=show_toplinks?height-(isIE?19:15)+”px”:height-(isIE?4:0)+’px’;
It seems to have fixed the problem.
I wanted to control this with an external CSS file. Todo so, comment out all the style lines. Then, add this.
Taking care to give your select boxes id’s so it is copied to the converted code.
Then you can control with css styles of
#idname {} #idname label {} #idname label:hover {} /*nice rollover effect*/ #idname input {vertical-align:middle;} /* makes sure the checkbox is aligned to the middle with the text */How are your projects going Kae ? Im curious about the Gardening Robot!
lol! I’ll have an article up about it soon. Basically, the bot is a brick at the moment. It’s a very small (20cm x 20cm x 5cm) wooden box which is wirelessly networked. I’ll write up an article on it when I’ve successfully managed to power it by battery and get it to move itself with motor-driven wheels.
To get back on topic here – I have no new code yet to announce, but there are many ideas in the comments for people to play with.
[...] The files load upon certain conditions. For example, my multiselect code is only invoked when the document contains a <select> box, and my shopping cart code is only invoked when there is an element in the page with the class shoppingcart (btw: that’s a funky shopping cart, I think you’ll agree
). [...]
I’ve got a couple things to add. First, I applied the updated script and I had to tweak my css solution slightly.
Still add
wrapper.id = ms.id;
And remove all the javascript styling of the div and label elements. Then you have the following css to define.
#idname /* this is the wrapping div */
#idname div /* this div is where height and overflow needs to be set*/
#idname a /* controls the all, none, reset links */
#idname label /* the label */
#idname label:hover /* adds a nice effect */
#idname input { vertical-align: middle } /* again, this aligns the text with the checkbox */
For those curious on my formatting, see http://www.e-freehold.com/search.html
Also, you MUST use for all your options. If you omit the value=, Internet Explorer will not work right when it submits the data. So make sure to define the value. This seems obvious to me now but I made the mistake and it caused this bug.
Finally, I’d like to also say, really great script. This is a usability dream for multiselects. Nicely done and thanks for sharing this with us all.
Very nice formatting, Josh B! I’ll be showing that to my designers when I get into work today.
Josh B ,
I really like what you did for that…http://www.e-freehold.com/search.html
I was trying to use what you had done on my site.. everything is fine but the checkboxes dont show…
can you help me ?
Thanks much!
oh.. btw.. Hello Kae!!!
ok ok.. silly me.. I got it working.. …
But my question still remains.. there are some muliple select boxes that i dont want to ahve the check box.. the reason is because i have a 4 part selects that update each other based on what you select from another…
How do i tell the others not to pick up the properties of the muliselect while keeping it on the others ?
One more question for you Josh B…..
The mouse over effect works great for Mozzila.. but most of the formating (besides bgcolor) is removed on IE …. did I do something wrong ?
To make it a little bit more functional, I added code to mimic (follow) the onChange functionality of the multiselect. Now, when a checkbox is checked or the all/none/reset buttons are clicked, the default onChange functionality is called. A small change to your OnChange event handler allows for both versions to be handled in one function. Email me if you want the code
Stripe-Man: Re: some multiselects, not others.
one way I have considered doing this (because I can see a need for this as well) is to use CSS to “flag” things. You can set multiple class names as styles in HTML. Have one of them (not even defined in a CSS file) be the name of a “flag” CSS class that signifies that you don’t want it transformed.
Example: ……
Then, you simply check for the NoCBReplace class in your code in the if(ms.multiple) line
Stripe-Man: Re: some multiselects, not others.
The example code was cut in my first post:
Example: <select name=Select1 id=Select1 class=”MultiSelect” multiple>…</select><select name=Select1 id=Select1 class=”MultiSelect NoCBReplace”>…</select>
GReat…. so your working on that now ? LOL
and yes.. please do provide the code (your email address is not linked to your name so i can not get your email addie! LOL
pleaes email me to @ stripe-man@stripe-man.com
Thanks so much…
I haven’t done it yet, but it’s a pretty easy job and I can probably take care of it in an hr or so, so perhaps over my lunch break today I’ll throw it together for you.
I’ll email it to you when I’m done.
LOL wow.. ok… i cant wait to see it! LOL
did he forget ? LOL
Possibly not – most people that work in open source do it in their spare time. I know for a fact that there is work I’ve been meaning to do for months (this, for example I haven’t touched in half a year).
Try working it out yourself and posting what you come up with – if it’s anywhere near useful to people, then they will reply with either bug-fixes, or further improvements.
Got Ya Kae ..thanks… i will try… and i know what you mean about OS and totally understand… I will try to work this out… and post back if I make headway on it.. thanks agian…
Sorry man, I got pretty busy at work.
I changed the line: if(ms.mulitple){
to: if(ms.multiple && String(ms.className).search(‘NoCBSwitch’) == -1){
then, in your code, if you do select class=”NoCBSwitch” then it’ll not replace. Furthermore, if you already have a class for your select drop downs, just add that text to your class information: class=”NoCBSwitch NormalClassHere”
WOW.. that works great.. along with Josh B mod.. and your mod Eli.. this is just awsome!
Thanks so much…
wow.. Kae.. your self approving of ones post is great!
Eli.. you asked me to post a reminder for you LOL
“With a bit of code modification, you could easily remove the checkbox from the checkbox list instead of limiting the interface… your choice. ”
That would be totally great!
THanks for any help Eli!
Here is your reminder you asked for Eli! LOL
“With a bit of code modification, you could easily remove the checkbox from the checkbox list instead of limiting the interface… your choice. ”
Thanks and your mod works great!
Hello,
To start I would like to thanks the creator of the multiselect. It is very well done and very very helpfull.
This message is for Josh B.
Firstly I would like to say that your design of the multiselect on http://www.e-freehold.com/search.html is very very nice. Netherless I have a little problem with it.
Indeed Inside my I have two that look very nice thanks to you. When I use IE and I submit the data I can retrieve the data in the next page. But when I use Firefox it is not working.
Of course I tested your webpage and it works fine on both of the browsers.
So do you have any clue.
I am sure I did a mistake but I don’t know where.
Regards,
Fred
Great work! But, I have come across an issue that is bugging me!
I’ve noticed that the rendering is not correct when embedded within divs. I have this control under a [+] which expands and displays the list. The bad render can be seen here: http://egon.intranetics.co.uk/tmp1.JPG. However when I expand the [+] when the page is loading the list displays correctly as shown here: http://egon.intranetics.co.uk/tmp2.JPG
I am using Firefox 1.0.7 on Win XP.
Has anyone else come across this?
Egon
Egon, do you have a test page so I can see the problem in action?
The multiselect gets its width and height from the select box it is replacing. Make sure that the select box is the correct size.
Kae
Fred, WordPress appears to be dropping anything with a left pointy bracket in it. Please put an example up somewhere and tell me the URL
Hi Kae,
Ok I’ve set up this demo here:
http://egon.intranetics.co.uk/select_test.php
If you are quick to open the div (+), you can see that the list renders correctly – you have to be quick! If you miss out it displays as tmp1.jpg as above and reders incorrectly. I could force it in the JS to be say 450 wide, but if there are other selects on the page they will then be all 450 wide which isn’t very practicle.
Thank you for this really great script! I’d recently admired similar multiple selects at pricegrabber.com http://www.pricegrabber.com/search_attrib.php/page_id=5/form_keyword=video%20card/rd=1/adv=1. I figured my PHP skills too basic to implement anything similar. I’m partly puzzled by the processsing of the form though. Here’s the code which processes a form using several multiple=”multiple” option select fields:
[CODE] 0 “;
foreach ($_POST as $varname => $varvalue)
{
$_SESSION[$varname] = $varvalue;
if ($_SESSION[$varname] != “” && $_SESSION[$varname] != “SUBMIT”)
{ // A field is selected
if(is_array($_SESSION[$varname]))//check if select multiple was used i.e. $_SESSION[$varname] will be an array
{
if ($_SESSION[$varname][0] != ”)
{$where .= ” AND $varname = ‘”.$_SESSION[$varname][0].”‘ “;}
for ($i = 1; $i 0 AND TYPE = ‘COMMERCIAL’ OR TYPE = ‘UTILITY’ AND FOREMAN = ‘BM’ [/QUOTE]
…it NEEDS to echo this instead to work properly (i.e. return the results one would expect from the form)
[QUOTE] WHERE id > 0 AND TYPE = ‘COMMERCIAL’ AND FOREMAN = ‘BM’ OR TYPE = ‘UTILITY’ AND FOREMAN = ‘BM’ [/QUOTE] .
On the form variable named TYPE[] , the values ‘COMMERCIAL’ and ‘UTILITY’ were selected, on the form variable named FOREMAN[] ‘BM’ was selected. I’m using the $_SESSION array to retain access to the $where string if needed later. $where is being used in a mysql query e.g. (SELECT * FROM $table $where)
Any ideas are appreciated. Thanks again!!
The code was not posted correctly in my earlier post. I will try to correct it and post again.
Howdy Kae… um… not sure if you knew.. your rss feed does not work
any chance of getting that fixed ? 
I’ve been meaning to get around to that – many people have pointed it out to me. I’ll grab a CVS shot of WordPress and fix it immediately
there y’are.
THis is a really nice formated tex thing Kae.. but IE and Maxthon both have probs.. the box just disapears and this error is displayed in the javascript window: Line:12 Char:38124 Code:0 Error:Invalid source HTML for this operation. URL:http://verens.com/archives/2005/04/27/son-of-multiselect/Â