18 comments found.
Can this be integrated with Gravity forms?
Hello, how do I get it to go to a link when selected?
Hello. You could bind change event to a dropdown and then do a redirect. In the demo (and download package as well) there is example 7, where it is demonstrated how to bind a change event. In the case of example, there is a simple alert window displayed when change happens, however, you could perform a redirect instead. Hope this is helpful!
Hello! Thank you so much for creating this plugin! It’s working great except for when I dynamically add in another row with multiple selects. As you can see here, when you click on the plus button, another row is added but the dropdown won’t open for the selects.
I’m using the class hide for the row and removing the class once the button is clicked. Also, I’m using this form validator plugin to manage adding in the row. Not sure if that makes a difference or not.
Any thoughts would be very helpful.
Thank you.
Hello! Thanks very much for your comment, I am having a closer look at your case, as I don’t seem to find an immediate answer. I will get back to you as soon as possible.
The website you are building looks awesome! 
Hello, I think I have an idea why there is problem with the dropdowns newly created on the page.
My observations: Once the page loads, there is an initialisation statement $(’.custom-select’).bootstrapSelect( ... ); on the page load there are some original dropdowns with classname .custom-select and a template #flavoursTemplate which also contains an element inside it with classname .custom-select. Later on, the template is used to generate new dropdowns (when plus button is clicked).
The problem (potentially): the initialisation statement $(’.custom-select’).bootstrapSelect( ... ); targets not only the existing dropdowns, but also a dropdown element inside a template.
Suggested course of action: What I suggest is 1. to remove .custom-select classname from inside the template, so that the initialisation statement doesn’t target it. 2. Then when generating every new dropdown from a template, give it a new unique identifier (id attribure). 3. For each of the newly generated dropdowns, perform an initialisation statement, after it has been added to the webpage, something along the lines: $(’#my-id-for-the-newly-appended-drodown’).bootstrapSelect( ... ); This should attach the event handlers properly for the new dropdowns, so the click event will work.
I hope this helps and please feel free to let me know if there is further investigation needed.
You’re a life saver! Thanks so much for your help and your advice. You were totally spot on! But I managed to do it with just removing the ‘custom-select’ class from the template and adding that class in the on click function along with another initialization of your plugin.
And I’m glad you think the site looks good! Thanks again
Very glad I could help you!
The website looks great indeed, best of luck with launching such a beautiful product.
Many thanks, I am so glad you like the plugin! Yes, I see the keyboard appearing on iPhone… I have just tried a quick experiment – added `readonly=”true”` attribute to an original select html element. This seems to work – keyboard does not appear any more. However, you may need to tweak the styling slightly, as the box appears in grey colour once you add this attribute. Regarding the redirect after user selects an option from a dropdown (as demonstrated in the example http://bit.ly/1uBmloB) – according to my quick experiment this behaviour is not affected by readonly attribute. So I think it should be safe to use. Hope this is helpful. Over the next couple of days I will try to carefully test this and add as plugin feature or even as a default behaviour, when filter is not enabled (see example 6 – filter enabled and typing is actually required).
Absolutely love your plugin!
Definitely worth the small amount you ask for it 
Thanks, Bijsterz! I am very glad to hear you like it
Hi, could this be used as a language picker?
Thanks
Hi sebmariey, it depends how your language picker is going to look like. Generally, yes, it can be used for this purpose, as: 1. you can control the textual labels pf the plugin, so you can set them to be language name; 2. you can detect a change event, so for e.g. you can set a redirect to happen when user selects a different option from a dropdown. However, mind you, you can only have textual labels inside dropdown options, so if your language picker options need to have flag images, it can only be achieved with background images, and not by adding image tags inside options. I hope this is helpful, sebmariey. Let me know if you have any further questions at all.
Hi Lisa, nice plugin. It works perfect, I love it.
I would like to know if there is any way to allow multiple selects but with just one control (adding checkmarks to selections) instead using 3 (or more) controls like the live preview??? Thanks in advance
Hi dgrauers,
Thank you, I am very glad that you like my plugin!
Do you mean functionality that is similar to native HTML select element with ‘multiple’ attribute enabled (http://jsfiddle.net/AyL4L/)? Unfortunately, this plugin does not support it yet. I am planning to implement it in the next release though, but honestly, it may happen no earlier than in 2-3 weeks, as I am very busy at my day job at the moment.
Thanks, and please feel free to let me know if you have any questions at all.
Hi, I’ been fiddling with this since last night. My select and option tags are generated dynamically. I also use jquery-1.10.2 in my Bootstrap 3 framework. This is my site, http://otoneo.com if you click on the blue buttons you can see the dropdowns inside the modal window. Everything seems to load correctly. But it doesn’t change anything.
Hi. Many thanks for the link, it is very helpful. I think the problem is happening because plugin is called on $(document).ready(), which is too early. If you could try calling it when select html element is fully constructed and attached to the DOM tree, it should help, I believe.
Hmm, tried different ways like (window).load(function()) or jQuery(document).ready(function ()) and lastly I deferred loading the $(’.simple_select1’).bootstrapSelect(); for 6 seconds but still no fun.
I think document or window ready is not enough here, perhaps plugin should be initialised on popup window callback. I am happy to take another look at your website later today and do some experiments then I will get back to you with my results. Hope that’s fine.
That’s totally fine. Thanks!
setTimeout(function(){
$('.simple_select1').bootstrapSelect();
}, 500);
I saved your website locally with browser’s save as command, then edited it slightly by adding the code above and it worked well for me.
Thank you so much. This worked in one of the forms. Although the styling appears in one form for an instance and then it disappeares. The difference of that form is that it has some conditional/dependent fields populated dynamically with the first dropdown. Do you know by any chance a jquery function that follows these events and refreshes the script? I assume that is the problem.
I think the behaviour you are describing is specific to your website, but there is a feature included in a plugin that may be helpful in your case – adding/removing options dynamically using plugin methods, please take a look at Example 13. From your description it looks like your select item is rebuilt entirely after the custom select plugin is initialised, so I think you need to make sure that plugin is re-initialised each time custom select is rebuilt.
How do I dynamically add items to the dropdown? I was able to do it with some jquery but when you click on an item it redirects to the tag that I inserted. Your
I have just experimented with adding a new item and here is the code snippet I came up with.
// 1. initialisation, saving custom select object into variable<br />
var custom_select = $('.simple_select').bootstrapSelect().data('plugin_bootstrapSelect');<br />
<br />
// 2. new option construction<br />
var new_value = 'some_new_value'; <br />
var new_li = $('<li></li>'); <br />
var new_anchor = $('<a href="'+new_value+'">some new label</a>');<br />
$(new_li).append(new_anchor);<br />
$('.dropdown-menu').append(new_li);<br />
<br />
// 3. now, bind click event to a new option<br />
$(new_anchor).click(function(e){<br />
e.preventDefault(); /* stop link default behaviour */ <br />
custom_select.set_value(new_value); /* select a value */<br />
custom_select.close();<br />
});
Please feel free to use it for now, if it looks good to you, but I will look into introducing new plugin methods – add_option and remove_option, to make this process easy and straightforward.
sorry, code formatting went wrong, give me a minute and I will post the reforammter snippet again.
// 1. initialisation, saving custom select object into variable
var custom_select = $(’.simple_select’).bootstrapSelect().data(‘plugin_bootstrapSelect’);
var new_value = ‘some_new_value’;
var new_li = $(’<li></li>’);
var new_anchor = $(’<a href=”’new_value’”>some new label</a>’);
$(new_li).append(new_anchor);
$(’.dropdown-menu’).append(new_li);
// 3. now, bind click event to a new option
$(new_anchor).click(function(e){
e.preventDefault(); /* stop link default behaviour /
custom_select.set_value(new_value); / select a value */
custom_select.close();
});
Thanks for the fast response. I was missing the preventDefault. This will be a pretty robust control when your all done with it. Any chance you could make it play nice with Knockout?
I may look into making it work with Knockout.js in the future, but I think it won’t happen any time soon. But thanks for your suggestion, it is certainly worth taking into consideration. I will let you know if I have any updates on this topic.
Can you please offer a css file with just the needed entrys for the selector. If I import the main css file, it overwrites my own css and breaks my website. Why are you declaring ‘body’ ‘html’ ‘a’ at all? I have bought this for the selector to simply implement it, not to have hours of recoding of my existing website just for a selector…
Regards
Dear volkanfidan, I am so sorry to hear that you are disappointed.
Please bear in mind, this plugin is written specially for Twitter Bootstrap 3 CSS Framework. Those ‘html’, ‘body’ and ‘a’ decralations are PART OF the framework, which is included as asset. Plugin styling is separated from framework and all plugin-specific styling is located only in boostrap-select.css file, where every css rule is namespaced. If you were not primarily using Bootstrap 3 CSS framework, then I dare to suggest that possibly this plugin was not the right choice for your particular case, as it fully relies on the framework and is basically designed to extend it.
I hope this is helpful to you.
Thank you for the message. I see, well nevermind, I have managed to seperate it, although it is for a framework. Thank you for your work. Love the outcome. <3
Very glad to hear that, volkanfidan. In case you have any further questions, please feel free to let me know. Best of luck with your project!
Just an awesome clean plugin!
Glad you like it, thanks snowman18!
Another point! This is an select-field. Why users can type something in that field. Does that make sense?
Actually, yes, typing should be prevented. I will include this in the next update, which I hope to make in the next couple of days. Thanks a lot for your feedback, Fabian.
Nice to hear.Thx
Nice Work! But i have problems with big data. There is no scrollbar to scroll to the last element. Is this a known bug?
.bootstrap-select .dropdown-menu {
max-height: 200px;
overflow-y: auto;
}
However, I did not want to include this for everyone because of 2 reasons: it is needed in a relatively small percent of cases on one hand, and scrollbar doesn’t look great, on the other hand.
I hope this is helpful to you! I will actually think about it over this weekend and see if it may be useful to add the discussed feature as a customisation option.
Thanks for fast reply. I think it is needed. Youre right there arent many cases but there are a few. Will test youre solution.
Works!
Hi,
first of all compliment, you keep a great work!
It’s simple and powerful!
I got into a small issue, when I click to open a select using the right button with icon, then the menu is open but the page is reload.
Check bootstrap-select.js plugin I see this code:
bootstrapSelect.find('.input-group-btn').append('<button class="btn '+defaults['button-style']+' dropdown-toggle">...
I think that probably is missing attribute data-toggle=”dropdown” to the buttons, how bootstrap3 examples show.
But when I add this, the page is not reload, but also the menu is not open 
Any suggestions?
Thanks!
Dear damirg,
Thanks for you kind words.
Have you tried opening a fully-working-example.html that is included in the download package? If it works for you, I am quite sure it does , then the problem is not in the plugin file.
From the your description of a situation it looks like there is some javascript error on your page which stops from working all javascript that is involved afterwards (in particular plugin’s part where it prevents default icon link behaviour). Have a look at a console in firefox or chrome to see if there are any javascript errors on your page, if there are any, then they need to be fixed. Hope it helps!
See this? <3
It means love. <3
I love this.
Considering I make all my sites with Bootstrap 3, and that I do follow fair license use, you can expect heavy purchases from me in the future.
Thanks for making this.
Thanks for you support, bherbert. I am very glad you like it!
Hoping to make more useful extensions for Bootstrap if I have any good ideas.
Like it! Bookmarked as well.
Nice work Lisa, but in the screenshot, what is the big green block from the dropdown ?
Thanks for your question, varcolac1000. I didn’t realise it is slightly confusing. First option in this dropdown is empty and is currently selected. Active option gets highlighted, in this case first (empty) option, also worth mentioning that grey text is a placeholder. I will modify a screenshot shortly and add another open dropdown to demonstrate selected option in a better way.
Good to hear, MyNameIsMatthew thanks!