When doing $('select').selectBox({autoWidth: false});
Options boxes can be smaller than the controlbox, which is wierd.

Changing the "else if" to just "if" on line 437 solves this problem.
https://github.com/claviska/jQuery-SelectBox/blob/master/jquery.selectBox.js#L437

jquery.selectBox.js line 121:

isMac = navigator.platform.match(/mac/i).length > 0;

navigator.platform.match(/mac/i) returns null in windows. null.length results in error.

I've got a demo that shows that this control does not work inside a jquery ui tabs control. How do I submit my file for this bug to be verified? Below it is copy and pasted:

<script src="jquery.selectBox.js" type="text/javascript"></script>
<link href="jquery.selectBox.css" media="print" rel="stylesheet" type="text/css" />

<script type="text/javascript">

    $(document).ready(function () {

        //
        // Enable selectBox control and bind events
        //
        $("#create").click(function () {
            $("SELECT").selectBox();
        });

        $("#destroy").click(function () {
            $("SELECT").selectBox('destroy');
        });

        $("#enable").click(function () {
            $("SELECT").selectBox('enable');
        });

        $("#disable").click(function () {
            $("SELECT").selectBox('disable');
        });

        $("#serialize").click(function () {
            $("#console").append('<br />-- Serialized data --<br />' + $("FORM").serialize().replace(/&/g, '<br />') + '<br /><br />');
            $("#console")[0].scrollTop = $("#console")[0].scrollHeight;
        });

        $("#value-1").click(function () {
            $("SELECT").selectBox('value', 1);
        });

        $("#value-2").click(function () {
            $("SELECT").selectBox('value', 2);
        });

        $("#value-2-4").click(function () {
            $("SELECT").selectBox('value', [2, 4]);
        });

        $("#options").click(function () {
            $("SELECT").selectBox('options', {

                'Opt Group 1': {
                    '1': 'Value 1',
                    '2': 'Value 2',
                    '3': 'Value 3',
                    '4': 'Value 4',
                    '5': 'Value 5'
                },
                'Opt Group 2': {
                    '6': 'Value 6',
                    '7': 'Value 7',
                    '8': 'Value 8',
                    '9': 'Value 9',
                    '10': 'Value 10'
                },
                'Opt Group 3': {
                    '11': 'Value 11',
                    '12': 'Value 12',
                    '13': 'Value 13',
                    '14': 'Value 14',
                    '15': 'Value 15'
                }

            });
        });

        $("#default").click(function () {
            $("SELECT").selectBox('settings', {
                'menuTransition': 'default',
                'menuSpeed': 0
            });
        });

        $("#fade").click(function () {
            $("SELECT").selectBox('settings', {
                'menuTransition': 'fade',
                'menuSpeed': 'fast'
            });
        });

        $("#slide").click(function () {
            $("SELECT").selectBox('settings', {
                'menuTransition': 'slide',
                'menuSpeed': 'fast'
            });
        });


        $("SELECT")
                    .selectBox()
                    .focus(function () {
                        $("#console").append('Focus on ' + $(this).attr('name') + '<br />');
                        $("#console")[0].scrollTop = $("#console")[0].scrollHeight;
                    })
                    .blur(function () {
                        $("#console").append('Blur on ' + $(this).attr('name') + '<br />');
                        $("#console")[0].scrollTop = $("#console")[0].scrollHeight;
                    })
                    .change(function () {
                        $("#console").append('Change on ' + $(this).attr('name') + ': ' + $(this).val() + '<br />');
                        $("#console")[0].scrollTop = $("#console")[0].scrollHeight;
                    });

        $("#tabs").tabs();

    });
</script>

    <div id="tabs">
        <ul>
            <li><a href="#tab1">Tab 1</a></li>
            <li><a href="#tab2">Tab 2</a></li>
            <li><a href="#tab3">Tab 3</a></li>
        </ul>
        <div id="tab1">


            <label for="standard-dropdown">Standard Dropdown</label><br />
            <select id="standard-dropdown" name="standard-dropdown">
                <option id="testing" value="1asdasd">Item 1</option>

                <option value="2">Item 2</option>
                <option value="3">Item 3 has &lt;a&gt; really long label but it won't affect the control's display at all</option>
                <option value="4">Item 4</option>
                <option value="5" disabled="disabled">Item 5 (disabled)</option>
                <option value="6">Item 6</option>

                <option value="7">Item 7</option>
                <option value="8">Item 8</option>
                <option value="9">Item 9</option>
                <option value="10">Item 10</option>
                <option value="11">Item 11</option>
                <option value="12">Item 12</option>

                <option value="13">Item 13</option>
                <option value="14">Item 14</option>
                <option value="15" selected="selected">Item 15</option>
                <option value="16">Item 16</option>
                <option value="17">Item 17</option>
                <option value="18">Item 18</option>

                <option value="19">Item 19</option>
                <option value="20">Item 20</option>
            </select>



        </div>
        <div id="tab2">     
            Standard control with OPTGROUPS<br />
            <select name="standard-with-optgroups">
                <optgroup label="Section 1">
                    <option value="1">Item 1</option>
                    <option value="2">Item 2</option>
                    <option value="3">Item 3</option>

                    <option value="4">Item 4</option>
                </optgroup>
                <optgroup label="Section 2">
                    <option value="5">Item 5</option>
                    <option value="6">Item 6</option>
                    <option value="7">Item 7</option>
                    <option value="8">Item 8</option>

                </optgroup>
                <optgroup label="Section 3">
                    <option value="9">Item 9</option>
                    <option value="10">Item 10</option>
                    <option value="11">Item 11</option>
                    <option value="12">Item 12</option>
                </optgroup>

                <optgroup label="Section 4">
                    <option value="13">Item 13</option>
                    <option value="14">Item 14</option>
                    <option value="15">Item 15</option>
                    <option value="16">Item 16</option>
                </optgroup>
                <optgroup label="Section 5">

                    <option value="17">Item 17</option>
                    <option value="18">Item 18</option>
                    <option value="19">Item 19</option>
                    <option value="20">Item 20</option>
                </optgroup>
                <optgroup label="Section 6">
                    <option value="21">Item 21</option>

                    <option value="22">Item 22</option>
                    <option value="23">Item 23</option>
                    <option value="24">Item 24</option>
                </optgroup>
            </select>   
            <br/>
            Multi-select control with OPTGROUPS<br />
            <select name="multi-with-optgroups" multiple="multiple">
                <optgroup label="Section 1">
                    <option value="1">Item 1</option>
                    <option value="2">Item 2</option>
                    <option value="3">Item 3</option>
                    <option value="4">Item 4</option>

                </optgroup>
                <optgroup label="Section 2">
                    <option value="5">Item 5</option>
                    <option value="6">Item 6</option>
                    <option value="7">Item 7</option>
                    <option value="8">Item 8</option>
                </optgroup>

                <optgroup label="Section 3">
                    <option value="9">Item 9</option>
                    <option value="10">Item 10</option>
                    <option value="11">Item 11</option>
                    <option value="12">Item 12</option>
                </optgroup>
                <optgroup label="Section 4">

                    <option value="13">Item 13</option>
                    <option value="14">Item 14</option>
                    <option value="15">Item 15</option>
                    <option value="16">Item 16</option>
                </optgroup>
                <optgroup label="Section 5">
                    <option value="17">Item 17</option>

                    <option value="18">Item 18</option>
                    <option value="19">Item 19</option>
                    <option value="20">Item 20</option>
                </optgroup>
                <optgroup label="Section 6">
                    <option value="21">Item 21</option>
                    <option value="22">Item 22</option>

                    <option value="23">Item 23</option>
                    <option value="24">Item 24</option>
                </optgroup>
            </select>
            <br/>
            Multi-select with few options<br />
            <select name="multi-select-few-options" multiple="multiple" size="5">
                <option value="1" selected="selected">Item 1</option>
                <option value="2">Item 2</option>
                <option value="3">Item 3</option>

            </select>
        </div>

        <div id="tab3">         
            Multi-select with few options<br />
            <select name="multi-select-few-options" multiple="multiple" size="5">
                <option value="1" selected="selected">Item 1</option>
                <option value="2">Item 2</option>
                <option value="3">Item 3</option>

            </select>
        </div>
    </div>
</div>
<div id="console" style="width: 50%; font-family: 'Courier New', monospace; border: solid 2px #000; background: #000; color: #FFF; height: 350px; overflow: auto; padding: 10px; float: right;"></div>

is it possible to make the select list appear above the control if there is insufficient vertical space in the browser window. many browsers do this when using the native select controls, and similar behaviour exists with other custom controls (e.g. as used in gmail.)

thanks

We've been having problems with setting select widths, and to be honest, accessing the custom select once it was created. However, we were able to overcome this by adding an ID to the dropdown.

After line 139 in the unminified js file, we added this chunk of code:

.attr('id', 'selectBox-'+select.attr('id') || '')

the result is the tag with the class "selectBox default selectBox-dropdown" would have the ID of "selectBox-" plus the ID of the select we're wrapping.

We've tested this, and this allows you to inividually style the selects, more specifically, the width. WOOT! Please add this to the code!

Hi.
When i destroy selectBox, and click on standart select element after, i have this error: Cannot call method 'find' of undefined.
With jquery 1.5.2 works fine.

When the the selectbox gets replaced, the new a-element does not inherit the id-attribute, so there is no easy way of selecting a specific selectbox to style it individually.

So the result would be something like this:

<select id="someId">...</select>
<a  id="someId" class="selectBox"> 

I lack the jQuery skills unfortunately to fork the plugin to add it myself.

The auto-width is causing some havoc for me because I need to float the select boxes. Some browsers (namely IE8+, but also the latest version of FF for Mac) display the boxes with longer widths, causing the floated select boxes to bleed onto a 2nd line.

I toyed with the plug-in script by changing the .width(select.innerWidth()) line as well as the section of the code that sets the label width, and was not able to get satisfactory results. Ultimately, I'd like to shut off the parts of the script that dictate the width the .selectBox elements and control the width of each discrete .selectBox via CSS. Is there a reliable way to do this?

Thanks,

Rob

If I do not destroy a selectBox before removing it, all other selectBoxes on that page don't work and give the "Uncaught TypeError: Cannot read property 'menuTransition' of undefined" error.

All bindings associated with that element when destroyed should also be destroyed.

Fix: destroy element then remove.

We need to use working examples please.

Great job!!

But, I try to user in IE 9 but i think it does not support it. Any suggestion how i can make it compatible..

Thank you!

• Need to add a refresh method that will sync the control with the original select element
• Need to remove the options method (all updates should occur on the original element, then a call to refresh)

The latest version produces this error: "missing ; before statement"

Seems the minification causes this, as expanding the code removes the error.

Also, there are a few console.log calls in the code that shouldn't be there in production code.

Hi, I've been hacking the usage of this plugin a little bit to be able to have some custom text showing up in the dropdown menu. Everything works fine, except when you click the option that is currently selected, the setting of the label gets to be all wrong. Other than that, it works fine.

On line 472, you have the following:

if( control.hasClass('selectBox-dropdown') ) {
control.find('.selectBox-label').text(li.text());
}

Isn't this redundant with the firing of the setLabel function through selectOption() ?

I've removed those lines now, and it doesn't seem to have mattered at all - and now it works fine!

Right now the plugin does a good job displaying very long dropdown however it does not allow the users any way to view the text that get cut off. Perhaps the dropdown content can "overflow" like this: http://simpletutorials.com/?path=tutorials/javascript/jquery/ddcombobox

We have select menus being dynamically generated by ajax, and when a select is removed from the page, it blows up the rest of the selects and I get an error "settings is undefined".

What seems to be happening is that if I use jQuery to remove content that contains a selectBox select, it destroys settings for all select boxes on the page. Big problem!

If you remove the border declaration from .selectBox-dropdown then IE can't position the new drop down element correctly. IE will return a default medium width for the border which means the following line fails:

top: control.offset().top + control.outerHeight() - (parseInt(control.css('borderBottomWidth'))), // 435

so top evaluates to NaN (?) so it doesn't get set. Suggest checking for it being NaN and defaulting to 0 otherwise.

The work around is to put in a dummy 0px wide border in your CSS, e.g.

.selectBox-dropdown
{
...
border : 0px solid black;
...
}

Didn't take too long to work that out but would be nicer if the code accounted for it. Otherwise it's a really nice bit of code.

Thanks,

Rob.

I noticed when I focus on a select box and start typing, the menu opens and jumps to the closest item, and as the item changes or I press "up" or "down" arrow keys, the value is changing immediately and firing the "change" event.

Is there any way to make it so the change event only fires on BLUR or ENTER key? This would be a little mimic the native feel for select boxes a little closer.

Thanks!

This would be great if it had themeroller support. No use having a fancy select if it looks different than the rest of the site.

Hey!

I'm trying to validate select box option using Jquery.Validate.js along with the styling plugin you provides. The problems seems to be that the selectbox validation is not working(other fields are working) along with the plugin you provided. When i disable your plugin the validation seems to be working. Please address the issue!

Is there a way to add extra data to options when using SelectBox?

My script presents a value in the dropdown box, but I want the actual value to be a unique ID so that whatever the user chooses can be passed to other functions.

I init several selectboxes, created dynamically.

$('SELECT#id1').selectBox({
'menuTransition': 'fade',
'menuSpeed' : 'fast'
});
After second select is created dynamically I call
$('SELECT#id2').selectBox({
'menuTransition': 'fade',
'menuSpeed' : 'fast'
});

From now SELECT#id1 stops working:
Uncaught exception: TypeError: Cannot convert 'settings' to object
var options=$(this),select=options.data('selectBox-select'),control=select.data('selectBox-control'),settings=select.data('selectBox-settings');

called from showMenu(select)

Error when you switch between tabs. Combobox doesn't work at all after you navigate to tab more than for 2 times.

File page.html

$(function () {
$("SELECT").selectBox();
});

<select id="combobox">
<option value="">Select one...</option>
<option value="1">Monday</option>
...
</select>

File main.html

<div id="tabs">
<ul>
<li><a href="#tab-welcome"">Welcome</a></li>
<li><a href="page.html">Page</a></li>
</ul>
<div id="tab-welcome">
<p>Welcome to great app.</p>
</div>
</div>

Google Chrome log:

Uncaught TypeError: Cannot read property 'menuTransition' of undefined
$.extend.selectBox.hideMenusjquery.selectBox.js:9
d.d.extend.eachjquery.js:16
d.d.fn.d.eachjquery.js:16
$.extend.selectBox.hideMenusjquery.selectBox.js:9
$.extend.selectBox.showMenujquery.selectBox.js:9
$.extend.selectBox.initjquery.selectBox.js:9
d.event.handlejquery.js:16
d.event.add.m.k.handle.mjquery.js:16

i noticed a problem with the automatic width calculation of the Options.

mainly produced here:
https://github.com/claviska/jQuery-SelectBox/blob/master/jquery.selectBox.js#L436

I dont think we should auto calculate width, if we had set this to false. Especially as it use innerWidth(), which ignores differences in border width and so produces a wrong result.

Not sure if I've made a basic error here, but all works fine until I try to add settings to my script:

    $(document).ready( function() {         
        $("select").selectBox('settings', { 'autoWidth' : false });
    });

For now I've changed the default setting within the main file, but wondering if there's a bug or I'm doing something wrong?

Method $('select').selectBox('destroy') removes some extra data from the element, but it leaves these data as defined.
And when you try to init plugin for this element next time (without page reload) - it doesn't work, because init method sees that special data for the element.
(You can find "NOTE" in jquery documentation: http://api.jquery.com/removeData/)

Try this example to see problem:

I've fixed this problem with small changes in destroy method:

var destroy = function(select) {

select = $(select);

var control = select.data('selectBox-control');
if( !control ) return;

var options = control.data('selectBox-options');
if (options)
options.remove();

control.remove();

select.removeClass('selectBox');
select.removeData('selectBox-control').data('selectBox-control', null);
select.removeData('selectBox-settings').data('selectBox-settings', null);
select.show();
};

The autoWidth functionality currently only works on the options and not the virtual select element. An easy fix that implements true autoWidth, add the following to the chain starting on line 42 ("Inherit class names, style, and title attributes"):

.width(select.innerWidth())

Now it acts as you'd expect, so you do not need to set any CSS for the width of anything.

I changed the styling to only have left and right outer borders and then the options never gets positioned in IE 7.
This is because in showMenu() there is a direct parseInt to the value of borderBottomWidth - which will be NaN. Newer browsers are more forgiving. Anyway here is a patch:

//declared at top of function
borderBottomWidth = isNaN(control.css('borderBottomWidth')) ? 0 : parseInt(control.css('borderBottomWidth'));

// Menu position
options.css({
top: control.offset().top + control.outerHeight() - borderBottomWidth,
left: control.offset().left
});

Doesn't seem to work in browsers on Windows.

Platform:
Windows 7

Browsers:
IE 7 - 10
FF 8
Chrome 16.0.912.63 m

How to reinitialize a particular dropdown once the document is loaded. After updating my page through ajax, dropdown is becoming normal html select cotrol. I tried "refresh" and "destroy" methods. But they didn't yield any result.Please suggest me how to reinitialize the control without recreating it.

Thanks.

Jquery 1.4.2

Work perfeclty in IE7 but don´t work in IE8 and IE9
Other browsers work good.

Hello,
If you have a border in the html body tag, the dropdown options list is not positioned correctly. It does not appear to take this border into consideration when positioning. To reproduce this error:

add,

"border-top: 50px solid #000"

in the body tag of the demo page.

Is there a fix or work around for this issue?
Thanks, Andrew

Brilliant plugin!! Greatly appreciated..

I just wanted to see how the ipad would go displaying this so i removed the ios check..
it looks just as good as it does on the desktop, however the scrolling doesnt work in the drop down section...

Would it be possible for the scroll to work? And perhaps maybe a flag in settings for those who do want to use the native iOS select boxes and others who want to override it with this??

Thanks!
Great work!

"A request, if I may: users of select element are used to start typing the word to search in the long list. Your plugin implements this standard functionality, but only partially. One can type a sequence of letters to scroll to a specific word. But can not type for instance 'a' several times to scroll down step by step through all items, which begin with 'a'. Your plugin treats this as a sequence 'aaa'."

Hi,

just checked the selectBox on mobile browser (WP7) and it works in the same way as on desktop.
While mobile browsers can recognize standard "select" control and represent it in a such way

It can be also acheved by usage of WAI-ARIA standard (http://www.w3.org/WAI/intro/aria). Any plans for this?

Add a check for Android devices that disables the control like the one for iOS.

"Have you considered positioning the menu relative to the dropdown? That way it automatically handles window resizing (if you change your browser window size now, the menu stays where it was, which isn't correct)."

Hi,

Love the plugin, works great.

However, given the following list:

<select>
  <option value="">Foo</bar>
  <option value="bar">Bar</bar> 
<select>

Trying to manually select Foo with value="" does not work:

select.selectBox('value', '');

It attempts to select the index with value 'Foo' instead of "".

It appears to be caused when the arguments are parsed:

case 'value':
   if( !data ) return $(this).val();
   $(this).each( function() {
      setValue(this, data);
});
break;

You may want to consider checking for undefined instead:

case 'value':
   if (typeof(data) === 'undefined') return $(this).val();

As an added note, attempting to select a value that doesn't exist in the select will simply do nothing in most browsers. However, IE9 will set the value to null, which throws an error when trying to evaluate the length of the select.val() in the setValue() method.

Just wondering if it's possible to trigger a click event on page load. I have tried using .trigger('click') but I get errors, which I think relate to extra parameters being passed on the actual click event.

Hi!
Something strange is happening when focusing the control in IE8. Please try the following:

-Open any window such as outlook
-Open IE8.
-Position the IE8 window and the second window so that they overlap and are same size
-open the demo page: http://labs.abeautifulsite.net/jquery-selectBox/
-click into any of the listboxes...

Note when you click in the other window will focus. If you press refresh and try again each time on the first click the other window will focus.

Any ideas?
Thanks
Tim

Hi,
I'm currently using your library. Great works !
But I'm facing a problem.
I have a mixed options list with optgroup and some values with no optgroup.
The values with no optgroup are not listed in the generate selectbox.

This is my select options :

<select name="data[Address][city_id]" class="form-error" id="AddressCityId">
    <option value="">Choose a city ...</option>
    <optgroup label="Country">
        <option value="1">City1</option>
        <option value="2">City2</option>
        <option value="3">City3</option>
    </optgroup>
    <optgroup label="Country2">
        <option value="4">City4</option>
        <option value="5">City5</option>
        <option value="6">City6</option>
    </optgroup>
    <option value="-1">Not listed</option>
</select>

The demo page does NOT work in the following:

Platform:
Windows 7

Browsers:
IE 7 - 10
FF 8
Chrome 16.0.912.63 m

This is NOT my implementation but claviska's implementation.

The readme.md file contains a link with a weird top level domain ".dev".

Please change http://labs.abeautifulsite.dev/jquery-selectBox/ to http://labs.abeautifulsite.net/jquery-selectBox/ to fix the issue.

onChange should not fire when using the up and down arrow keys to browse through the list. See http://jsfiddle.net/gducL/ for an example with a native select element

Hi,

There was a bug in jQuery < 1.7, regarding metaKey event #3368 which now is fixed, so the old check for event.metaKey didn't work now, coz metaKey != ctrlKey.

One of available options is to check for at least one from metaKey or ctrlKey, also what I did on a running projects. Because of this stuff selectBox is broken on almost every WordPress site that did update to 3.3 which includes jQuery 1.7 by default.

~ nvartolomei

Im not sure whats going on in the demo it works.

When I select an option from the drop down, I have to either double click it or click somewhere else to make the drop down disappear. In the demo it works like normal.

Im using newest version and jquery 162

Here is a sample drop down.

label for="typeofpolicy" id="pol"

select name="fields[type-of-policy]" id="fields-type-of-policy" title="" class=""

then the options

I'm using the same code as the demo in the header, not sure whats wrong.
Any help would be very appreciated.
Thanks.

seen on

• OS X Lion with
  • Safari 5.1.2
  • Chrome 16.0.912.75
• WinXP with
  • IE 8.0.6001.18702

OS X/Firefox 9.0.1 is ok

steps to reproduce

1. open drop-down of select box with many items. (this can be reproduced on the Standard Dropdown of the demo site
2. scroll to the bottom or top of the list.

expected result

• list remains visible to allow top or bottom item to be selected.

actual result

• list disappears.

We've got multiple selects on a page, and they all need to be different widths. I noticed that if you define inline style on a select, seletcBox respects that width. However, if you set the width of the individual select either by class or by ID, it won't respect that width.

Is there ANY way to get these select menus to behave? These are by far the best control I've found for select menus, but this is a deal breaker. thanks for your help!

It has been reported that setting empty options will not work. Look into and fix.