snapappointments / bootstrap-select Goto Github PK

Hello again,

I've been working with this control a little and have found that if you put the select in a collapsible nav and you lower the screen resolution to such a width that the nav collapses, the functionality breaks. I'm looking into this myself but thought I'd give you a heads up.

Here's the code to reproduce issue:

<div class="container-fluid">

    <div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a>
            <a class="brand" href="#" id="calendarTitle">Title</a>
            <div class="nav-collapse">
                <ul class="nav">     
                    <li class="dropdown">   
                        <a href="#" class="dropdown-toggle" id="legendTrigger">
                            Legend
                            <b class="caret"></b>
                        </a>                    
                    </li>
                    <li class="divider-vertical" ></li>
                    <li class="navbar-search">
                        Status:
                        <select id="testSelect">
                            <option value="1">Test #1</option>
                            <option value="2">Test #2</option>
                            <option value="3">Test #3</option>
                            <option value="4">Test #4</option>
                            <option value="5">Test #5</option>
                            <option value="6">Test #6</option>
                            <option value="7">Test #7</option>
                            <option value="8">Test #8</option>
                        </select>
                    <li />
                </ul>  
                <ul class="pull-right nav">
                    <li><button id="movePrev" class="btn"><i class="icon-arrow-left"></i></button></li>
                    <li><button id="moveNext" class="btn"><i class="icon-arrow-right"></i></button></li>
                </ul> 
            </div>                              
        </div>
    </div>
</div>

<script type="text/javascript">
    $('#testSelect').selectpicker();
</script>

Is there a chance to make the select has an auto width when option is selected?

Select width (from .css) = 100px
Option selected has 140px long, then
Select width = 140px

Can you make it auto width when select an option?

Hey @silviomoreto ,

I'm the project maintainer for SelectBoxIt and I'm looking for additional contributors. I noticed that your project is similar, so I wanted to reach out and ask you if you wanted to become a contributor to SelectBoxIt. If not, that's cool too!

Greg

I noticed that there is not enough space between the text and the arrow. Could you add a little?

With a selectpicker intialized and ready to use:
If one selects the same item as the currently selected one, a change-event is fired.

With a normal : If someone chooses an option, and that option is already selected, no change-event is fired. http://jsfiddle.net/H2JRz/ Technically, there is no change if the currently selected option is selected again. The selectpicker should try to replicate this behavior.

Scenario:

<select class="selectpicker">
<option>I need help with...</option>
<optgroup label="Group 1">
    <option value=3319  >1</option>
    <option value=3325  >2</option>
    <option value=3430  >3</option>
</optgroup>
<optgroup label="Group 2">
    <option value=3431  >4</option>
    <option value=3432  >5</option>
    <option value=3433  >6</option>
    <option value=3434  >7</option>
</optgroup>
<option value=3435  >8</option>
<option value=3436  >9</option>
<option value=3437  >10</option>
<option value=3438  >11</option>
<option value=3439 selected='selected' >12</option>
<option value=3440  >13</option>
<option value=3441  >14</option>
</select>

This will cause item 7 to be displayed instead of the correct 12. Here is why I think it is happening.

The code must be iterating over the select tag to find the index of the selected option. If it sees an optgroup, it does not expand it, but counts it as 1. In the above example, it optgroup is not expanded, the selected item is the 8th item on this list.

When deciding which index to put the selected on after rendering, optgroup is included so the 8th element is chosen, in this case: 7.

Well done. About to try it out :)
Noticed a couple little things.

The "Usage" section has mixed tags ..
I think you want open AND close option tags.
There are currently option tags opening, and select tags closing each option.

Correct --> "Create your ..."
Incorrect --> "Create yours ..."

Small potatoes, i know.

Sorry if I missed the method you've defined. I can't find it from the demo or .js file.
I used
$("#select_num").val(5); and
$("#select_num option[value=5]").attr("selected", "selected").
They don't work, ( because the action should be done to the "li>a") .
I guess that i should trigger the click event to "li>a", but i should focus the "index" value first (because the "li>a" don't have any other attr like 'value'), which need more script to write.

Wait for your better solution. Thank you very much!

I'm trying to use the selectpicker with angularjs, but doesn't show properly the use of brackets in the value parameter and the option text.

Did someone else tried to use the selectpicker in angularjs with bootstrap?

Is it possible to NOT show the "Please select one of the following..." item? I usually have that one as the first item, with an empty value, so that jqBootstrapValidation will mark it as invalid if no other value is selected.

However, that item is now shown in both the dropdown AND the first item in the openend div. It should be only in the dropdown.

For usability's sake, I understand that the "empty" item could be reselected if someone doesn't know what to select, but that would be covered by adding a last item "None of the above".

Also, I've needed to add CSS as .control-group.error .dropdown-toggle to be the same as .control-group.error select, is there a way for this to happen automatically? This is also for the validation: in my CSS, I make the outline red if no value is in the select at submit.

When used with KO JS, and the data-bind="enable: someTrueFalseValue" the drop down seems to be regularly enabled, even when it should be disabled.

By removing class="selectpicker" from the HTML everything works as expected! :( But I don't get the lovely bootstrap select styling.

Sad times.

e.g.
'''
select id="things"
data-bind="options: myThings, optionsText: 'name', optionsValue: 'id', value: 'myId' enable: false"
class="selectpicker"
/select
'''
Doesn't disable.. removing the selectpicker class, it's always disabled.

I know that the README suggests adding a 'disabled' attribute, when it should be disabled, but I can't see how this can be done with Knockout, I've tried attr { 'disabled: whetherMyThingShouldBeDisabled } .. but to no avail as it seems bootstrap select wants disabled or nothing, not disabled = true/false.

Could you throw up a list of the available options on the website and on the github page?

At the bottom of the documentation at http://silviomoreto.github.com/bootstrap-select/ the last example reads:

<select class="selectpicker">
    <option>Mustard</select>
    <option>Ketchup</select>
    <option>Relish</select>
</select>

The closing tags of the options are currently </select> when they should read </option> - this might catch a few people out.

Hello,

I faced on question about how to pass an options through javascript like code
$('.selectpicker').selectpicker({
btnStyle: 'btn-info'
});

Please replay

Thank you,
Developer

Hi,

could you please add a license to this library.

I really like what you did here but have some concerns to use this in a project without a correct license.

I would suggest you use the MIT license.

The new line added to bootstrap-select.js (line 79):

this.$element.bind('DOMNodeInserted', getSize);

is calling the getSize function, but it is declared within the IF condition on line 57. Issue was witnessed in Firefox on a Mac.

This completely breaks functionality in FF.

@caseyjhol

Please add the GA to your

<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-35848102-1']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
</script>

Thanks

Thanks for merging my commit!

I think @caseyjhol should update the demo page to include an example that uses the title tag.
http://caseyjhol.github.com/bootstrap-select/

I'm not sure if it should be part of README.md but I could provide a patch for README.md.

Thanks!
#41 includes code for README.md but the nice Examples page could really use the new functionality.

Currently there is no way to dynamically disable option from js.

It is very helpful when the list is too big (i.e. list of countries):
Ability to move the selection into the correct position in the list while typing on the keyboard. This feature is done by default on the normal select list. thanks

Right now, the menu height is set on render and doesn't change after that. You can set the data-size attribute, but it would be better if the height was dynamic so that the menu would never be cut off if the screen size is too small. This isn't an issue with normal selects because they're able to render outside of the window itself. I started working on this and should have it ready tomorrow.

Hello,

Thanks for the great addon! I noticed that when an option is changed with this plugin, the original select control's change event is not fired. I have added the following line to the bootstrap-select.js in my project to allow this functionality:

        clickListener: function() {
            _this = this;
            this.$newElement.find('li').on('click', function(e) {
                e.preventDefault();

                var rel = $(this).attr('rel');

                $(this).parents('.bootstrap-select').prev('select')
                    .find('option').removeAttr('selected');

                $(this).parents('.bootstrap-select').prev('select')
                    .find('option')[parseInt(rel,10)]
                    .setAttribute('selected', 'selected');

                $(this).parents('.bootstrap-select')
                    .find('.filter-option').html($(this).text());

                // Trigger select 'change'
                $(this).parents('.bootstrap-select').prev('select').trigger('change');
            });

Not sure this is useful for anyone else but thought I would just let you know!

Cheers and thanks again.

When I remove an option element from a select, the bootstrap-select doesn't update. I tried removing the full $('.bootstrap-select') group and re-initializing by calling .selectpicker(), but it won't update and recreate the dropdown.

$("#select_list option[value='New Test List']").remove();

Any suggestions?

Thanks!

I have a hidden select in a tab. When that select is displayed, the tab div height isn't updated, so that I get a vertical scrollbar and the select is truncated (until you scroll down).

for example:

select class="selectpicker" style="width:100px"

or

select class="selectpicker" style="width:50%"

Would be good if the button group that is generated could be appended or prepended to another input field.

Right now if you do:
div class="input-prepend"
select
input

it works hackily. but
div class="input-prepend input-append"
select
input
button

Fails to style the btn-group generate by this plugin onto the input (it gets styled onto the blank select as an append).

(Could be this is out of scope though)

Hi,

The following code is not working properly, please see the attached image:

<ul>
    <li ng-repeat="category in categories">
        <select class="select" ng-model="status" ng-options="obj.Id as obj.Name for obj in statuses"></select>
    </li>
</ul>

Please note that <div/> is not added just below the select control.

Just in case if you need more info: http://stackoverflow.com/questions/15563314/angularjs-bootstrap-select-is-not-shown-properly-when-ng-options-attribute-is-u

Thank you.

When using bootstrap-selects inside collapsing accordion I can't make it stay on top (even outside the accordion page). I tried different things but I couldn't make work... Any ideas what can be done to mimic the functionality of a normal select?

If select has attribute disabled, it isn't passed to bootstrap-select button.

I Think that the size option stopped working for element's that have not been attached to the DOM.

For what I've seen without knowing the full code the issue could be in line 31

var liHeight = parseInt(menuA.css('line-height')) + menuA.outerHeight(); //NaN

.css('line-height') is "".

At least on Chrome v23.0.1271.101:

$('').css('line-height')

I've patched by the moment with a default value like this:

var liHeight = parseInt(menuA.css('line-height'),10)||25 + menuA.outerHeight();

I know it's not the perfect solution....but not sure how to fix it.

I've noticed that the behavior is not standard of a select.
It seems to be impossible to choose an element with a value via jQuery.
I've also noticed that if I use an id for the select element a button with the same id is create

you can try it here http://jsfiddle.net/vandalo/vaMmA/

When I hit a button with type="reset" the reqular form fields are being reset to their default / initial value. But the bootstrap-select selectbox is not.
Please provide a method to reset the bootstrap select element.
Patrick

The optgroup's styles seem to disappear after adding a new option to the original Select element.

Upon page load, this is the structure I have:

<div class="dropdown-menu" role="menu">
  <ul>
    <li rel="0">
      <a tabindex="-1" href="#">Test List 1</a>
    </li>
    <li rel="1">
      <a tabindex="-1" href="#">Test List 2</a>
    </li>
    <li rel="2" class="optgroup-div">
      <a tabindex="-1" href="#">My List</a>
    </li>
    <li rel="3">
      <dl>
        <dt>
          Options
        </dt>
        <dd>
          <a class="opt5" tabindex="-1" href="#">Create New List</a>
        </dd>
      </dl>
    </li>
    <li rel="4">
      <a class="opt5" tabindex="-1" href="#">Manage Lists...</a>
    </li>
  </ul>
</div>

I then add a new option with the following code:

$("#select_list option[value='My List']").after("<option value='Test New List' class='local'>Test New List</option>")

The final result is this:

<div class="dropdown-menu" role="menu">
  <ul>
    <li rel="0">
      <a tabindex="-1" href="#">Test List 1</a>
    </li>
    <li rel="1">
      <a tabindex="-1" href="#">Test List 2</a>
    </li>
    <li rel="2">
      <a tabindex="-1" href="#">My List</a>
    </li>
    <li rel="3">
      <a tabindex="-1" href="#">Test New List</a>
    </li>
    <li rel="4">
      <a tabindex="-1" href="#">Create New List</a>
    </li>
    <li rel="5">
      <a tabindex="-1" href="#">Manage Lists...</a>
    </li>
  </ul>
</div>

Any suggestions? Could I be doing something wrong?

Any chance you could add the option of multi select as well.

Similar to this : https://gist.github.com/jculverwell/3943327

Something along the lines of a .multiselect class, that then would insert a
<span class="pull-right"></span>
to each row

and something like this in the row click handler...

$(this).toggleClass("checked");
$(this).find("span").toggleClass("icon-ok");
return false;

If i get some time ill fork and try it myself :)

m.

The .selectpicker() fails on handling empty selects like <select></select>.

Hey man, thank you for great extension

We have an issue with focusing element on TAB and shift-TAB, is there some way to fix this? (Also down arrow doesn't work as in html select) Sorry, works ...

P.S.: Works in chrome, doesn't work in FF (Mac OS)

Using the following example and clicking on the first label causes the second select button to have focus set. Problem is related to line 39 of bootstrap-select.js.

    <label for="page-select">Page</label>
    <select id="page-select" class="selectpicker">
      <option>1</option>
      <option>2</option>
    </select>

    <label for="type-select">Types</label>
    <select id="type-select" class="selectpicker">
      <option>Type 1</option>
      <option>Type 2</option>
    </select>

The span* functionality works well, but I need to specify a custom width.

I found that setting the width style in each of the following elements will give the desired result, but I can't quite figure out how to modify bootstrap-select.js.

.btn-group.bootstrap-select
button.btn.dropdown-toggle.clearfix

Support for a width data attribute like this would be amazing:

<select class="selectpicker" data-width="80px">

Hi! Nice plugin!

But I've found a little bug. If you have a select box with a blank option, for example:

<select name="example">
    <option value=""></option>
    <option value="4">Number 4</option>
    <option value="5">Number 5</option>
</select>

You will get something like this

I've fix with this code:

this.$element.find('option').each(function() {
    var optionClass = $(this).attr("class") !== undefined ? $(this).attr("class") : '';
    var text = $(this).text() != '' ? $(this).text() : ' ';
    if ($(this).parent().is('optgroup')) {
        if ($(this).index() == 0) {
            if ($(this)[0].index != 0) {
                _liA.push(
                    '<dt class="optgroup-div">'+$(this).parent().attr('label')+'</dt>'+
                    '<a tabindex="-1" class="opt '+optionClass+'">'+text+'</a>'
                    );
            } else {
                _liA.push(
                    '<dt>'+$(this).parent().attr('label')+'</dt>'+
                    '<a tabindex="-1" class="opt '+optionClass+'">'+text+'</a>'
                    );
            }
        } else {
             _liA.push('<a tabindex="-1" class="opt '+optionClass+'">'+text+'</a>');
        }
    } else {
        _liA.push('<a tabindex="-1" class="'+optionClass+'">'+text+'</a>');
    }
});

Google Chrome, MacOS X Mountain Lion

Tiny fix:

Usage docs should read:
` Mustard Ketchup Barbecue `

Instead of (note closing select tag ;):
` Mustard Ketchup Barbecue `

It's possible that I'm missing something, but I wasn't able to make the select-element obtain the correct form value after selection.
I had to change the source code slightly:

if (_this.$element.not(':disabled')) {
  $select.prev('select').find('option').removeAttr('selected');
  $select.prev('select').find('option').eq(selected).attr('selected', 'selected');
  $select.prev('select').find('option').eq(selected).prop('selected', true);

I've put a bootstrap-select in a twitter bootstrap modal dialog and when I select the option from the dropdown-menu, I'm redirected out of the modal dialog. The problem is related to using href="#' in the anchors. I've added "data-bypass" to the anchor and this has fixed the issue.

Is this fix something that can be incorporated?

Is there a way to get bootstrap-select to respect the selected="selected option? Currently this is ignored and the first option is shown.

Just did some quick tests with 2.3.0 and noticed the lost of the format for the options. Checking the new .css file it seems like Bootstrap changed the selector from ".dropdown-menu li > a" to ".dropdown-menu > li > a", this selector doesn't work because there's a

element between .dropdown-menu and
• . I already opened an issue here in Github in the Bootstrap repo.

  If you want to have the old behavior just add the following lines to your bootstrap-select.css:

  .bootstrap-select.btn-group .dropdown-menu li > a {
      display: block;
      padding: 3px 20px;
      clear: both;
      font-weight: normal;
      line-height: 20px;
      color: #333333;
      white-space: nowrap;
  }
  .bootstrap-select.btn-group .dropdown-menu li > a:hover, .bootstrap-select.btn-group .dropdown-menu li > a:focus {
      text-decoration: none;
      color: #ffffff;
      background-color: #0081c2;
      background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
      background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
      background-image: -o-linear-gradient(top, #0088cc, #0077b3);
      background-image: linear-gradient(to bottom, #0088cc, #0077b3);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
  }
  

If you change the options for the select after the select picker has been initialized, the options in the selectpicker are not changed to match.

Here is a jfiddle to demonstrate the problem: http://jsfiddle.net/ZCmcT/1/

I tried calling $('picker').selectpicker() again but correctly the code ignores a duplicate initialization call.

This could be handled one of two ways:

-- Option 1: put an event handler on the original select in the selectpicker logic to listen for changes to the options and then change the selectpicker accordingly.

-- Option 2: add an option to the selectpicker call to allow for updates.

Not sure which is the best option to take. I could take a look at adding option 1.

Cheers,

Chad.

To be able to access the new bootstrap-select btn in CSS, it would be helpful if the id was copied over to the new anchor.

I've have attached the code snippet.

Thanks

var id = this.$element.attr('id');
if (id !== undefined) {
    this.$newElement.find('> a').attr('id', id);
}

I decided to give the plugin a try on Android, however the dropdown auto-closes as soon as I let go of the button that first opens the dropdown. Touching it once makes the button flicker a bit, then closes the dropdown automatically.

I'll try to provide a patch for this as soon as I figure out the reason why this happens in the first place.

Tested on Android 4.2.1, on the native browser.
This doesn't happen on Firefox Mobile though.
This doesn't happen on the iPhone 5 browser either.

In Internet Explorer 8, I'm getting a 'console' is undefined error in bootstrap-select.js, both on my own site and on the preview site, causing it to break and not render.