EzDev.org

bootstrap-select

bootstrap-select - Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard select elements. bootstrap-select bootstrap-select is a jquery plugin that utilizes bootstrap's dropdown.js to style and bring additional functionality to standard select elements.


How to set selected value on select using selectpicker plugin from bootstrap

I'm using the Bootstrap-Select plugin like this:

HTML:

<select name="selValue" class="selectpicker">
   <option value="1">Val 1</option>
   <option value="2">Val 2</option>
   <option value="3">Val 3</option>
   <option value="4">Val 4</option>
</select>

Javascript:

$('select[name=selValue]').selectpicker();

Now I want to set the value selected to this select when button clicked... something like this:

$('#mybutton').click(function(){
   $('select[name=selValue]').val(1);
});

But nothing happens.

How can I achieve this?


Source: (StackOverflow)

Disable dropup feature using Bootstrap Select

I'm using Bootstrap Select to style some select fields inside an accordion. Bootstrap select has a feature where it will make your dropdown dropup if it is near the bottom of the screen.

In this case I do not want it to drop up but I can't find where to disable this.

Bootstrap select: http://silviomoreto.github.io/bootstrap-select/


Source: (StackOverflow)

How to enable/disable bootstrap selectpicker by ickeck checkbox

There are selectpicker beside checkbox. I want if checkbox is checked, selectpicker will be enable, if unchecked, selectpicker will be disable. I wrote this which was not working ( Here is the fiddle ):

$('.checkBox').on('ifChecked', function(event) {
    $(this).parents('.clearfix').find('.selectpicker').removeAttr('disabled');

});
$('.checkBox').on('ifUnchecked', function(event) {
    $(this).parents('.clearfix').find('.selectpicker').attr('disabled');
});

Source: (StackOverflow)

Bootstrap-select - how to fire event on change [duplicate]

This question already has an answer here:

I'm using Bootstrap 3.0.2 and the Bootstrap-select plugin.

Here's my select list:

<select class="selectpicker" data-live-search="true" data-size="7">
  <option>Petr Karel</option>
  <option>Honza Novák</option>
  <option>David Egydy</option>
  <option>Sláva Kovář</option>
  <option>Hana Skalická</option>
  <option>Simona Kolářová</option>
  <option>Kateřina Sychová</option>
  <option>Amálka Sychová</option>
  <option>Jana Sychová</option>
  <option>Magdaléna Sychová</option>
  <option>Tereza Sychová</option>
  <option>Bohdana Sychová</option>
</select>

Here's my JavaScript:

//inicialization of select picker
$('.selectpicker').selectpicker();

//on change function i need to control selected value
$('select.selectpicker').on('change', function(){
   var selected = $('.selectpicker option:selected').val();
   alert(selected);
});

Issue

My problem is that change function won't work. It doesn't do anything, and I can't find solution by myself.

If i put it into document ready instead change function it seems to be working. So i guess i have mistake somewhere in:

$('select.selectpicker').on('change', function(){

I also tried to use only:

$('.selectpicker').on('change', function(){

without this select prefix but nothing changes.

UPDATE

Solution is putting jquery code into document.ready(). Thanks to Kartikeya


Source: (StackOverflow)

input-group-addon with bootstrap-select

I tried to use Label 2 with bootstrap-select, but it looks different to the bootstrap (Label 1) one. How is it possible to get the two labels in the code below look the same?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="shortcut icon" rel='nofollow' href="../../docs-assets/ico/favicon.png">

    <title>Test</title>

    <link rel="stylesheet" type="text/css" rel='nofollow' href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" rel='nofollow' href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">
    <link rel='nofollow' href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">

  </head>

  <body>

    <div class="container">
      <div class="col-lg-6">
        <div class="input-group">
          <span class="input-group-addon">Labe 1</span>
          <input type="text" class="form-control" name="snpid" placeholder="Test">
          <span class="input-group-btn">
            <button class="btn btn-default" type="submit">GO!</button>
          </span>
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->  
    <div>    
    <BR/>
    <HR>

  <div class="container">
    <form class="form-inline">
      <div class="form-group">
        <span class="input-group-addon">Label 2</span>
      </div>
      <div class="form-group">
        <select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ...">
          <option>Hot Dog, Fries and a Soda</option>
          <option>Burger, Shake and a Smile</option>
          <option>Sugar, Spice and all things nice</option>
          <option>Baby Back Ribs</option>
          <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
        </select>
      </div>
    </form>
    <div>  

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
    <script>
      $('.selectpicker').selectpicker();
    </script>
  </body>
</html>

Source: (StackOverflow)

Bootstrap Select - reinitialize on dynamically added element

I'm using Bootstrap Select (http://silviomoreto.github.io/bootstrap-select/) for displaying dropdown with Font-Awesome icons for each section of my website.

I added ability to add new sections - when clicked on add button, a new section (duplicate of previous section) is added. In this section, the Bootstrap Select doesn't work.

I tried to reinitilize it like:

var select = $('[name="section['+ numbersection +'][section_icon]"]');
$(select).selectpicker('destroy');
$(select).selectpicker({
  showIcon: false
});

That doesn't work though, as the detroy method doesn't seem to fire. Is there a way to reinitilize Bootstrap Select on dynamically added element?


Source: (StackOverflow)

Bootstrap select loading takes too long in IE

I'm loading 1000 records to a bootstrap select dropdownlist. It takes about 2 seconds in Chrome but takes 30 seconds in IE 9. Also, cancel or x out the bootstrap modal in IE takes 10+s too. The API call is ok but the rendering is so slow; Could some one give me some direction?

So I'm loading a list of customers and setting the selected. Here is the code.

    var customerPicker = $('#customer-picker');
    API.getCustomers().then(function (result) {
        loadDropdown(customerPicker, result.customers); 

        // set the selected to current customer; it takes 10s in IE
        customerPicker.val(currentCustomerId).selectpicker('refresh'); 

        // it takes about 10s in IE too. selector is the bs modal div
        $(selector).css('z-index', '1060').modal('show'); 
    }).catch(function (errorMessage) {
        ToastManager.showError(errorMessage || 'An error occurred while loading customer list. Please try again.');
    });

    function loadDropdown($div, arr) {
        var options = '';
        $.each(arr, function (i, item) {
            options = options + '<option value="' + item.Value + '">' + item.Text + '</option>';
        });
        $div.html(options);
    }

enter image description here


Source: (StackOverflow)

AJax does not work with bootstrap-select

I found flask-jquery-ajax example where the user selects an item from the vehicle "Make" drop down menu, the vehicle "Model" drop down menu is populated by making an AJAX request for a list of models for the make selected.

I tried to replace the drop-down menus by bootstrap-select and as soon as I include class="selectpicker form-control" in the second drop-down menu it does not get any more populated after the first drop-down has been chosen.

This is the HTML template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Flask Jquery AJAX Drop Down Menu Example</title>

    <link rel="stylesheet" type="text/css" rel='nofollow' href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" rel='nofollow' href=//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css>
    <link rel="stylesheet" rel='nofollow' href="{{ url_for('static', filename='web.css') }}">

    <!-- Custom styles for this template -->
    <link rel='nofollow' href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">
</head>
<body>
    <h1>Select Vehicle</h1>

    <form class="form-horizontal" action="/" method="POST" >
      <div class="input-group">
    <span class="input-group-addon">Make:</span>
    {{ form.make(id="make_select", class="selectpicker form-control") }}
      </div>

      <div class="input-group">
    <span class="input-group-addon">Model:</span>
    {{ form.model(id="model_select", class="selectpicker form-control") }}
      </div>
        <button type="submit">Submit</button>
    </form>

    {% if chosen_make %}
        <h2>You selected:</h2>
        <ul>
            <li>Make ID: {{ chosen_make }}</li>
            <li>Model ID: {{ chosen_model }}</li>
        </ul>
    {% endif %}

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
  <script>
    $('.selectpicker').selectpicker();
  </script> 
  <script src="/assets/vehicle.js"></script>
</body>
</html>

This is the JavaScript code responsible for populating the drop-down menus:

$("#make_select").change(function() {
    var make_id = $(this).find(":selected").val();
    var request = $.ajax({
        type: 'GET',
        url: '/models/' + make_id + '/',
    });
    request.done(function(data){
        var option_list = [["", "--- Select One ---"]].concat(data);

        $("#model_select").empty();
        for (var i = 0; i < option_list.length; i++) {
            $("#model_select").append(
                $("<option></option>").attr(
                    "value", option_list[i][0]).text(option_list[i][1])
            );
        }
    });
});

Why does class="selectpicker form-control" from bootstrap-select cause that the second drop-down menu get not anymore populated?


Source: (StackOverflow)

Bootstrap-select plugin: how to avoid flickering

The Bootsrap-select plugin is amazing (http://silviomoreto.github.io/bootstrap-select/). It provides an extremely easy way of creating gorgeous select menus in Bootstrap. The one problem I've encountered with it, however, is "flickering" on page load. What I mean by this is fairly straight forward:

  1. The page loads with original HTML select element (which of course looks like crap)
  2. The Bootstrap-select plugin JS runs
  3. At some noticeable time after the page loads the original HTML select element is converted to a nice Bootstrap-select element by JS in Step (2).

So, the user first sees the HTML select element and then sees it switch to the pretty Bootstrap-select item, thus the "flickering".

Has anyone found a good solution to the problem?


Source: (StackOverflow)

How to add data attribute in Rails form select tag?

I found this Bootstrap Select project and its gem for Rails. I want to implement search in the select tag.

I do inspect element and here is the HTML source:

<select class="selectpicker" data-live-search="true">
  <option>Hot Dog, Fries and a Soda</option>
  <option>Burger, Shake and a Smile</option>
  <option>Sugar, Spice and all things nice</option>
</select>

How do I add data-live-search="true" inside my form select tag?

My form select:

<%= f.select :food_id, options_for_select(Food.all.map{|c| [c.name, c.id]}, f.object.food_id), {}, {class: "form-control selectpicker"} %>

What I've tried:

<%= f.select :food_id, options_for_select(Food.all.map{|c| [c.name, c.id]}, f.object.food_id), {}, {class: "form-control selectpicker", data: "live-search"} %>

But it's not working.


Source: (StackOverflow)

Bootstrap Select drop list moves down ward automatically

I am Bootstrap Select user in IE11.

When I fill data with ajax and open it then it automatically move down wards and when I select any value then it's not selected. How can I remove this error?

jQuery.ajax({
        url: base_url + "UserBusinesses/ajaxState/" + countryId,
        dataType: 'json',
        beforeSend: function () {
            $('#UserBusinessStateId').html('<option value="">Loding... </option>');
            $('#UserBusinessStateId').selectpicker('refresh');
            $('#UserBusinessCityId').html('<option value="">Select city</option>');
            $('#UserBusinessCityId').selectpicker('refresh');
        },
        success: function (obj) {
            var addHtml = '';
            addHtml += '<option value="">Select state</option>';
            $.each(obj, function (key, value) {
                var selected = "";
                if (selectedState == key) {
                    var selected = "selected='selected'";
                }
                addHtml += "<option value='" + key + "' " + selected + ">" + value + "</option>";
            });
            jQuery("#UserBusinessStateId").html(addHtml);

            $('#UserBusinessStateId').selectpicker('refresh');

        }
    });

Source: (StackOverflow)

Get value from "Bootstrap-Select"

I have a selectbox and when I select the option it updates the input box with the selectbox's values. This is working with an older version of Bootstrap-Select. But in the newer version it doesn't work anymore. I am looking for a way to make this to work in the newer version. Thanks.

HTML:

<select class="selectpicker Categoria" multiple="">
  <option selected>A1</option>
  <option selected>A2</option>
  <option>A3</option>
  <option>A4</option>
</select>
<input type="text" class="ChangeCategory" name="ChangeCategory">

JS:

$('select').selectpicker();

$(".Categoria").change(function() {
  f2();
});

var f2 = function(){
  $('.ChangeCategory').val($(".Categoria").val());
}
f2();

Source: (StackOverflow)

bootstrap-select.js & Laravel Form Facade -- no select "value"

When using bootstrap-select.js in combination with the Laravel Form facade, no value is transmitted. dd() says null

{!! Form::select('user', $users, null, array('class' => 'selectpicker show-tick', 'data-live-search' => 'true', 'id' => 'user_select')) !!}

However when using the form facade without bootstrap-select like this:

{!! Form::select('user', $users, null) !!}

it works.

dd() says 1


Source: (StackOverflow)

Show title in Bootstrap-Select without empty element

In Bootstrap-Select, how can I prevent the first selected item from being shown in the title. Alternatively, how can I hide an empty first item from the list of drop down options

In HTML, the <select> element will automatically select the first <option> element by default. The typical way around this is to create a blank first row, but this looks pretty odd as part of the dropdown menu exposed by bootstrap select.

Here are my two options:

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

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

But neither look very good. The first ignore the title property entirely and the second has a blank space which looks weird on a dropdown menu:

screenshot

<link rel='nofollow' href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<link rel='nofollow' href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>


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

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


Source: (StackOverflow)

Bootstrap select destroy removes the original select from DOM

I am currently using the Bootstrap select plugin in one of my projects. I have a dynamically generated table that has select elements which I then convert to bootstrap select using the command:

_tr.find('select.selectpicker').selectpicker({ size: 10 });

Where _tr is the row where I added the select elements. This is working fine, the bootstrap select is shown and in firebug I still see the original select element.

Now every row has a button where it removes ( destroy ) the bootstrap select. But it removes also the original select, and thats the poblem because I still need the original select to do something else.

I use the following command to destroy:

 $('select#begin' + _week + _day).selectpicker("destroy");
 $('select#end' + _week + _day).selectpicker("destroy");
 $('select#pause' + _week + _day).selectpicker("destroy");

In other plugins if you use destroy, it shows the original element again. Is this an issue in the boostrap select plugin or is there another way to remove the bootstrap select and reshow the original select.


Source: (StackOverflow)