How to open the select element via JavaScript ?

hi,

when setting a value in JS for customSelect dropdown, just only selectedIndex is changed, not displayed value:

document.getElementById("P107_EDIT_VATID").value = 117;

selectedIndex does return value correctly, but not visible in the dropdown, until you drop it.

alert(document.getElementById("P107_EDIT_VATID").options[document.getElementById("P107_EDIT_VATID").selectedIndex].value);

Hi

I'm using jq.validate form my forms.

How do I get the custom select to reflect the '.error' class on my select fields which have the class required?

Hello guys,

I'm not 100% sure this is of much concern but while trying to get my form to layout that way I wanted it to I noticed that when I add a label for my select field the actual select field gets pushed up and over to the right of everything.

You you click around and finally click within the select field you get your dropdown. Is this plugin not friendly to labels? or am I missing something?

My HTML:

<label for="upload-action">What are you doing? (Optional)</label>
 <select class="upload-select">
 <option value="Select an Activity" selected="selected">Select an Activity</option>
 <option value="Option 1">Option 1</option>
 <option value="Option 2">Option 2</option>
 </select>

My JS:

jQuery('.upload-select').customSelect({
    customClass: 'select-fields'
});

My CSS:

.select-fields { 
            padding: 9px;
            border: solid 1px #c5c6c8;
            outline: 0;
            background: #FFFFFF;
            background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
            background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
            box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
            font-family: Arial, sans-serif;
            font-size: 12px;
            -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
            -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
            -webkit-appearance: none;
            width: 100%;
        }

Thanks for this great plugin. I was previously using directy Ryan Fait's method, but it is much simpler with this script!

Unfortunately, while Custom Select works just fine on IE8 and IE9, it is a bit buggy on IE10 (as Ryan Fait's method), even on the demo on the officiel website (http://adam.co/lab/jquery/customselect/). The select list doesn't show up at the bottom of the select box.

Thank you!

I noticed that if you are using media queries to change placement of elements the selects do not follow to the new position. I have written below some enhancements to the plugin that would fix this scenario.

The simple answer to fixing this problem would be to wrap the select and the spans in a div with relative positioning. By doing this setting the coordinates is unnecessary because the select is now positioned relative to its parent.

Thanks for all the hard work you have done and the great plugin you have created.

return this.each(function () {
    var $select = $(this),
        customSelectInnerSpan = $('<span />').addClass(getClass('Inner')),
        customSelectSpan = $('<span />');

    customSelectSpan.addClass(prefix);

    if (options.mapClass) {
        customSelectSpan.addClass($select.attr('class'));
    }
    if (options.mapStyle) {
        customSelectSpan.attr('style', $select.attr('style'));
    }

    $select
        .addClass('hasCustomSelect')
        .on('update', function () {
            changed($select,customSelectSpan);

            var selectBoxWidth = parseInt($select.outerWidth(), 10) -
                    (parseInt(customSelectSpan.outerWidth(), 10) -
                        parseInt(customSelectSpan.width(), 10));

            // Set to inline-block before calculating outerHeight
            customSelectSpan.css({
                display: 'inline-block'
            });

            var selectBoxHeight = customSelectSpan.outerHeight();

            if ($select.attr('disabled')) {
                customSelectSpan.addClass(getClass('Disabled'));
            } else {
                customSelectSpan.removeClass(getClass('Disabled'));
            }

            customSelectInnerSpan.css({
                width:   selectBoxWidth,
                display: 'inline-block'
            });

            $select.css({
                '-webkit-appearance': 'menulist-button',
                width:                customSelectSpan.outerWidth(),
                position:             'absolute',
                opacity:              0,
                height:               selectBoxHeight,
                fontSize:             customSelectSpan.css('font-size'),
                top:                  0,
                left:                 0
            });
        })
        .on('change', function () {
            customSelectSpan.addClass(getClass('Changed'));
            changed($select,customSelectSpan);
        })
        .on('keyup', function (e) {
            if(!customSelectSpan.hasClass(getClass('Open'))){
                $select.blur();
                $select.focus();
            }else{
                if(e.which==13||e.which==27||e.which==9){
                    changed($select,customSelectSpan);
                }
            }
        })
        .on('mousedown', function (e) {
            customSelectSpan.removeClass(getClass('Changed'));
        })
        .on('mouseup', function (e) {

            if( !customSelectSpan.hasClass(getClass('Open'))){
                // if FF and there are other selects open, just apply focus
                if($('.'+getClass('Open')).not(customSelectSpan).length>0 && typeof InstallTrigger !== 'undefined'){
                    $select.focus();
                }else{
                    customSelectSpan.addClass(getClass('Open'));
                    e.stopPropagation();
                    $(document).one('mouseup.'+getClass('Open'), function (e) {
                        if( e.target != $select.get(0) && $.inArray(e.target,$select.find('*').get()) < 0 ){
                            $select.blur();
                        }else{
                            changed($select,customSelectSpan);
                        }
                    });
                }
            }
        })
        .focus(function () {
            customSelectSpan.removeClass(getClass('Changed')).addClass(getClass('Focus'));
        })
        .blur(function () {
            customSelectSpan.removeClass(getClass('Focus')+' '+getClass('Open'));
        })
        .hover(function () {
            customSelectSpan.addClass(getClass('Hover'));
        }, function () {
            customSelectSpan.removeClass(getClass('Hover'));
        })
        .wrap('<div style="position:relative" />')
        .parent("div").append(customSelectSpan.append(customSelectInnerSpan))
        .find("select").trigger('update');
});

My app has binds that executes a function based on the focus event. When you tab from one field into a customSelect field, the focus event gets called twice, first from tabbing into the field, and the second from line 107:

.on('keyup', function (e) {
    if(!customSelectSpan.hasClass(getClass('Open'))){
        $select.blur();
        $select.focus();
    }else{
        if(e.which==13||e.which==27){
            changed($select,customSelectSpan);
        }
    }
})

I'm guessing this part of the code is used to deal with multiple instances of customSelect?

Hi,

First of all thanks for the great plugin. Your select box works great in desktop and mobile but i have a small problem. When i apply "multiple" attribute to select box, it's stop working. Any idea to manage your plugin with "multiple" attribute enabled. You can check below demo link.

http://jsfiddle.net/hysHB/776/

Any help greatly appreciated.

Thanks.

If my form has a "reset"-button the select does not reset. Please fix

There are a number of reasons to use dashed-syntax rather than camelCase in CSS, but most importantly:

From the spec, section 4.1.3:

All CSS syntax is case-insensitive within the ASCII range...

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B&W?" or "B\26 W\3F".

...the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification.

I've added this in a pull request: #70

Adding a simple float:left to the select elements completely breaks the interaction on all but the first select elements.

Man, it's always me. I found another bug on css class change.

If you have two or more customSelect in the same page:
e.g. #cSelectA and #cSelectB.
You click on #cSelectA the plugin adds .customSelectOpen to it, but then if you click on #cSelectB without closing #cSelectA both the customSelects will have .customSelectOpen class.

See example here, .customSelectOpen adds a red background.
http://jsfiddle.net/hysHB/74/

If you click on the customSelect box and it opens and then click on an area of the page other than the customSelect or options box, the options box closes, but customSelect retains the customSelectOpen class.

Looking at the code, it's because the only way to remove the customSelectOpen class is for the customSelect to lose focus and "blur," but since the customSelect still has focus, it's retaining the customSelectOpen class.

I guess the issue is what event do you look for, then?

I'd gladly amend the script myself, but wonder what the best solution is.

Thanks!

In mobile Safari on the iPhone the native select menu opens as expected when clicking the customSelect. However, clicking does nothing in Chrome on Android and the default Android browser.

Hi,

I have a strage problem in that if I resize the browser on my responsive site the hit zone of the select menu is very small - it is fine if I refresh the page. I think this is because it is set to display:none initially ? Is there anyway to avoid this problem?

thanks,
Gareth

I've attached a sample image

Hi,

Thank you for this plugin, when viewing my site on the iPhone as I view each page the native select menu is shown for a second or two,before it is replaced with my custom style.

is there a way to avoid this?

thanks,
Gareth

After opening the options through a click, if you press some key, the list is closed automatically. This becomes a problem since it has a behavior different from the select default and prevents the user of switching between the options with the arrow keys.

customSelect will set a class .customSelectDisabled on a select element that is disabled on initialisation.
But it doesn't listen for changes in the disabled/enabled state and add/remove the .customSelectDisabled class accordingly.

It would be nice if it did.

Workaround: instead of using the handy CSS class shortcuts to style a disabled element, select it like so:

.hasCustomSelect:disabled + .customSelect { background:gray; }

var ele = $('#selector_id').customSelect({customClass:'selector_style'});

ele.change(function(event, ele){
    console.log(event);//triggers twice
});

and .on('change', function (event) in the source triggers twice as well
any idea why? thanks!

customSelect() is triggering onChange event on select list item, page goes into infinite loop.

Hey Adam

thanks for this - looks great.

(I originally posted about IE9 not showing this properly on your demo page, but on my page its fine, so lets ignore that).

i have a tage inside a hidden div. when the div is opened - the width of that select is minute - almost un-noticable. for now i have added a min-width on the span, but if you have better ideas i would appreciate it. thanks!

Added a select field and trying to style with plugin. No luck.

Have other select fields styled just right but when appears in modal the select target area is small and in the top left corner of the .customSelect span.

Is this a bug or is there some type of workaround?

I can't manage to rotate up the arrow near my customSelect when is actually open and rotate down it when s are not visible. To remove the .customSelectOpen I need to click twice...

I have two forms one is hidden (display:none) and only shows when you submit the first form (ajax).

I tried making something like this:

$(form).fadeIn(200, function(){
$('.custom-select').trigger('update');
});

But doesn't update the width and the position of the select box.

I'll try to see what's going on.

BTW thanks for the plugin!

On a few select dropdowns, the customSelect box takes almost 10 seconds to update with the selection. Re-clicking the box causes it to update before hand.

Anyone ever had any trouble with there being a delay between the select box updating with the selected value?

How do you make this plugin work in a situation where you use AJAX to repopulate a select list's options after you've already called .customSelect() on that same select element before?

Hi. While i'm focused on other inputs of form, hitting Enter key causes "Submit" key being pressed. But while focusing custom select, it just ignores Enter.
How to force enter for default behavior?
Thanks

I found using the customSelectHover CSS class to style the hover state to be buggy. Sometimes when mousing out and clicking on other select menus, the hover state doesn't go away right away.

I found it to be much more consistent and reliable to do the following, using the CSS adjacent sibling selector:

select.hasCustomSelect:hover + .customSelect {

}

The focus class is not added to input when you go over the label element.

<label for="xxx">
<input ... id="xxx" />

I'm implementing this on a form with HTML5 validation, however once the plugin is activated, the selects which have validation do not show the browsers "tooltip" to show it's a required field. I'm guessing this is to do with the opacity.

Is there any way around this?

Cheers
Mark

Hi,

I have created empty select which is filled with options on page load event. And when i trigger customSelect on it, i am getting empty select without options. I found out that its issued by .trigger('update').

I am able to fix it by adding following code at the end of return function is your script:

var temp = $select.html();
$select.trigger('update');
$select.html(temp); 

but i am not sure if its a good fix. So please check it if you can.

Hi

There is some issue with Prototype used in Magento. Event 'update' crash display select. When I change 'update' to 'update2' it's work fine. But I thing it's not a good solution :)

When autofilling a credit card form with Safari, the selected values that display to the user in the "faked" dropdown span class="customSelect" are not accurate. If I click on the dropdown the correct value is checked in the option list, but the customSelect instance is not updated/refreshed with the correct value. I must choose another value, then my original value for it to update.

Apparently, the script doesn't work when you create via jQuery a new select and then you try to apply the customSelect.

I'm moving through inputs in my form with TAB, when customSelect is focused options list is not showed.

The customSelect span is above my select box, as a result, I have to click above the actual select box to get this to open, I have tried using CSS to bring the span down but the max I can get it is a few pixels down. Hence, at the moment this is unusable for me.

Do you know how to fix this?

Very much appreciated.

I'm noticing a problem where select drop downs are unable to open if customSelect is being used to style multiple selects on the same page (only one select box will open in this case). I am targeting all the select boxes and styling them with the following:

$('select').customSelect();

The problem still occurs if I target each individual class one by one (ex. $('.select-1').customSelect(); & $('.select-2').customSelect(); ). Any ideas on a way to work around this?

I've got a curious issue here.
The plugin itseft seems to be working, however, it only triggers the Javascript on the very first select element in the page.

Sometimes, the select arent positioning correctly. On the image below, i show where is the custom select, and the current select element (blue transparent element).

this can be solved by simply adding a container (with position relative) around the current elements. Eg.

<span class="custom-select-container">
  <select class="custom-select">
        <option>Option A</option>
        <option>Option B</option>
        <option>Option C</option>
    </select>
    <span class="custom-select-inner">
        <span class="custom-select-value">Option A</span>
    </span>
</span>

Thank you for the attention

Hi guys,

I have select width 100%, but during resize the window customSelect doesn't resize. May be I miss something, please help.

There is a problem with customSelectSpan.outerWidth() on 95 line. It throw different values with same elements. So I need to specify default width.

How to do that? Maybe:

Initialization:
$("#some-select").customSelect({width: 276});

Defaults:
var defaults = {
customClass: 'customSelect',
mapClass: true,
mapStyle: true,
width: null
},

On update:
$select.css({
'-webkit-appearance': 'menulist-button',
width: options.width || customSelectSpan.outerWidth(),
position: 'absolute',
opacity: 0,
height: selectBoxHeight,
fontSize: customSelectSpan.css('font-size'),
left: position.left,
top: position.top
});

Thank you for your plugin! :)

Hi. I'm using Custom select alongside with KnockoutJS.
I have two custom selects. '.child' - dependent on '.parent' select, so while choosing options from Parent select - Child options are changing.

There is an issue, when you've selected an option from child select, than selected another value from parent, so now option you've chosen on child - doesn't exist, but still is selected.

I've tried using $('.child').trigger('update');, but i've got completely no result. It's like not using this 'update' at all.

Would be much appritiated, if you'll help me to change child select's value to first available.

Sorry for the silly question, but I'm getting crazy on this.
I have a select coded from django, and i applied your plugin. It works fine for the style (perfectly i would say), but when i click on the select i get no option list. Any hint?
my html markup:

<select name="supplier" id="id_supplier" class="hasCustomSelect" style="width: 254px; position: absolute; opacity: 0; height: 28px; font-size: 12px;">
<option selected="selected" value="">---------</option>
</select>
<span class="customSelect" style="display: inline-block;">
<span class="customSelectInner" style="width: 236px; display: inline-block;">---------</span>
</span>

my js:

$('#id_supplier, #id_iva').customSelect();

my css:

.customSelect {
    /* Styles For Your Select Box */
    position: relative;
    background:url('/static/web/images/calendario.png') no-repeat 205px center;
    font-family:$_font_arial;
    font-size:12px;
}
.customSelect {
    border-radius:5px;
    border:2px solid $_blu_chiaro;
    padding:0 5px;
    margin:0 0 30px 30px;
    font-family:$_font_arial;
    font-size:12px;
        width:220px;
    height:25px;
}

Hello, I have noticed when using this plugin in a responsive design the width of the select and span are static relative to the width of the browser upon refresh. Is there a way to make it have a dynamic width?

I can make it dynamic when I go into the browser and inspect the element. I change both the width of the span.customSelectInner and the select to 100%.

Thanks.

It seems that the hidden select does not get the correct height on this line:

var selectBoxHeight = customSelectSpan.outerHeight();

Version 0.2.4 seems ok.

If you clone the styled select element, it does not work. Trying to run the below code again results in the doubled instances for each select menu. I think the script should check if the instance is already on the element and update it, if necessary.

$('select').customSelect();

Hi,

I'm trying to customize the borders of the option box which appears once you click on the select arrow, as they look different depending on the browser. However after playing with the css and the jQuery code I'm unable to modify these. Here is the closest I got by modifying jquery.customSelect.css 0.5.1, line 92:

$select.css({
    '-webkit-appearance': 'menulist-button',
    width:                customSelectSpan.outerWidth(),
    position:             'absolute',
    opacity:              0,
    height:               selectBoxHeight,
    fontSize:             customSelectSpan.css('font-size')
    // added code
    ,
    background: 'yellow',
    border: '1px solid #CCCCCC',
    'border-radius': '6px',
    'box-shadow': '1px 1px 2px #eee inset'
});

The yellow color is applied, but not the borders. Is possible to have custom ones? Thanks.

Hi,
Great plugin.
I have a select that get its values through an AJAX request.
After it gets new values the selected value remains the same
although that option may not be available anymore.
More over select.val does not make any difference. (It should set the selected value)

Thanks!