Comments on: Select Box replacement

By: RenÃ©

RenÃ© — Fri, 20 Nov 2009 09:17:19 +0000

event.preventDefault() does not work for Enter in Firefox as mentioned under “Known issues”.

I solved the problem by adding the following code below the .keydown event handler:

.keypress(function(event) {
if(event.keyCode == 13) {
event.stopPropagation();
$(‘li.’ + opt.hoverClass).trigger(‘click’);
}
})

By: RenÃ©

RenÃ© — Tue, 17 Nov 2009 15:01:53 +0000

I had an issue where dropdownlists (ASP.Net) using selectbox where not firing onchange when AutoPostBack was set to true.

The try/catch is ugly which I am aware of but IE failed trying to validate attached validators which where not there.

The solution was changing the following code:
.click(function(event) {
var fl = $(‘li.’ + opt.hoverClass, $container).get(0);
if (opt.debug) console.log(‘click on :’ + this.id);
$(‘li.’ + opt.currentClass, $container).removeClass(opt.currentClass);
$(this).addClass(opt.currentClass);
setCurrent();
$select.get(0).blur();
hideMe();
try{
$select.change();
}
catch(err){}

By: jamus

jamus — Tue, 01 Sep 2009 15:43:24 +0000

This is great!

Just thought I’d mention the known issue isn’t an issue on my safari 4.0.2 (on mac).

By: axel

axel — Sun, 16 Aug 2009 16:46:22 +0000

this is doing the onChange trick for me, let me know if there is a better way to do it.
xs

function setCurrent() {
var li = $(“li.”+opt.hoverClass, $container).get(0);
var ar = (”+li.id).split(‘_’);
var el = ar[ar.length-1];
$select.val(el);
if ($input.val() != $(li).html())
$(“#”+$input.attr(“id”)).trigger(“change”);
$input.val($(li).html());
return true;
}

By: Luis

Luis — Wed, 01 Jul 2009 14:12:10 +0000

Hi! Just a tip! I think you forget to put the css file in the download zip! I resolved getting the css file of the example. But I think you should put it in the zip too.

By: Geoff Mooney

Geoff Mooney — Sun, 28 Jun 2009 06:32:35 +0000

IE7 & IE8, the scroll bar does not work, this reproducible even on this sites demo page just by adding more options to the select

By: mr. Extendaquin

mr. Extendaquin — Tue, 05 May 2009 11:54:42 +0000

Man thanx for this, have been looking for a quick and easy method for my drop downs.

By: chemix

chemix — Tue, 28 Apr 2009 18:12:39 +0000

Quick update for onchange compatibility

function setCurrent() {
var li = $(“li.”+opt.currentClass, $container).get(0);
var ar = (”+li.id).split(‘_’);
var el = ar[ar.length-1];
$select.val(el);
$input.val($(li).html());
//chemix
$select.change();
return true;
}

By: yAnTar

yAnTar — Tue, 10 Mar 2009 16:09:30 +0000

If replace
$select.children(‘option’).each(function() {
on
$select.find(‘option’).each(function() {
then partially work with optgroup

By: aladin

aladin — Thu, 19 Feb 2009 19:57:30 +0000

great work, just what I needed.
I only did some changes so it shows text inside the textbox and not html like “ test ”

function setCurrent() {
var li = $(“li.”+opt.hoverClass, $container).get(0);
var ar = (”+li.id).split(‘_’);
var el = ar[ar.length-1];
$select.val(el);
$input.val($(li).text());//instead of $input.val($(li).html());
//which seemed to had problems with whitespaces
return true;
}