Bootstrap-Select插件

Bootstrap Select 是使用按钮下拉的 Bootstrap 风格的自定义的选项和多选。

option

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-style=”” or data-selected-text-format=”count”.

Core options

• actionsBox
  boolean
  false
  When set to true, adds two buttons to the top of the dropdown menu (Select All & Deselect All).
• container
  string | false
  false
  When set to a string, appends the select to a specific element or selector, e.g., container: ‘body’ | ‘.main-body’
• countSelectedText
  string | function
  function
  Sets the format for the text displayed when selectedTextFormat is count or count > #. {0} is the selected amount. {1} is total available for selection.
  When set to a function, the first parameter is the number of selected options, and the second is the total number of options. The function must return a string.
• deselectAllText
  string
  ‘Deselect All’
  The text on the button that deselects all options when actionsBox is enabled.
• dropdownAlignRight
  boolean | ‘auto’
  false
  Align the menu to the right instead of the left. If set to ‘auto’, the menu will automatically align right if there isn’t room for the menu’s full width when aligned to the left.
• dropupAuto
  boolean
  true
  checks to see which has more room, above or below. If the dropup has enough room to fully open normally, but there is more room above, the dropup still opens normally. Otherwise, it becomes a dropup. If dropupAuto is set to false, dropups must be called manually.
• header
  string
  false
  adds a header to the top of the menu; includes a close button by default
• hideDisabled
  boolean
  false
  removes disabled options and optgroups from the menu data-hide-disabled: true
• iconBase
  string
  ‘glyphicon’
  Set the base to use a different icon font instead of Glyphicons. If changing iconBase, you might also want to change tickIcon, in case the new icon font uses a different naming scheme.
• liveSearch
  boolean
  false
  When set to true, adds a search box to the top of the selectpicker dropdown.
• liveSearchNormalize
  boolean
  false
  Setting liveSearchNormalize to true allows for accent-insensitive searching.
• liveSearchPlaceholder
  string
  null
  When set to a string, a placeholder attribute equal to the string will be added to the liveSearch input.
• liveSearchStyle
  string
  ‘contains’
  When set to ‘contains’, searching will reveal options that contain the searched text. For example, searching for pl with return both Apple, Plum, and Plantain. When set to ‘startsWith’, searching for pl will return only Plum and Plantain.
• maxOptions
  integer | false
  false
  When set to an integer and in a multi-select, the number of selected options cannot exceed the given value.
  This option can also exist as a data-attribute for an “
• maxOptionsText
  string | array | function
  function
  The text that is displayed when maxOptions is enabled and the maximum number of options for the given scenario have been selected.
  If a function is used, it must return an array. array[0] is the text used when maxOptions is applied to the entire select element. array[1] is the text used when maxOptions is used on an optgroup. If a string is used, the same text is used for both the element and the optgroup.
• mobile
  boolean
  false
  When set to true, enables the device’s native menu for select menus.
• multipleSeparator
  string
  ‘, ‘
  Set the character displayed in the button that separates selected options.
• noneSelectedText
  string
  ‘Nothing selected’
  The text that is displayed when a multiple select has no selected options.
• selectAllText
  string
  ‘Select All’
  The text on the button that selects all options when actionsBox is enabled.
• selectedTextFormat
  ‘values’ | ‘static’ | ‘count’ | ‘count > x’ (where x is an integer)
  ‘values’
  Specifies how the selection is displayed with a multiple select.
  ‘values’ displays a list of the selected options (separated by multipleSeparator.
  ‘static’ simply displays the select element’s title.
  ‘count’ displays the total number of selected options.
  ‘count > x’ behaves like ‘values’ until the number of selected options is greater than x; after that, it behaves like ‘count’.
• selectOnTab
  boolean
  false
  When set to true, treats the tab character like the enter or space characters within the selectpicker dropdown.
• showContent
  boolean
  true
  When set to true, display custom HTML associated with selected option(s) in the button. When set to false, the option value will be displayed instead.
• showIcon
  boolean
  true
  When set to true, display icon(s) associated with selected option(s) in the button.
• showSubtext
  boolean
  false
  When set to true, display subtext associated with a selected option in the button.
• showTick
  boolean
  false
  Show checkmark on selected option (for items without multiple attribute).
• size
  ‘auto’ | integer | false
  ‘auto’
  When set to ‘auto’, the menu always opens up to show as many items as the window will allow without being cut off.
  When set to an integer, the menu will show the given number of items, even if the dropdown is cut off.
  When set to false, the menu will always show all items.
• style
  string | null
  null
  When set to a string, add the value to the button’s style.
• tickIcon
  string
  ‘glyphicon-ok’
  Set which icon to use to display as the “tick” next to selected options.
• title
  string | null
  null
  The default title for the selectpicker.
• width
  ‘auto’ | ‘fit’ | css-width | false (where css-width is a CSS width with units, e.g. 100px)
  false
  When set to auto, the width of the selectpicker is automatically adjusted to accommodate the widest option.
  When set to a css-width, the width of the selectpicker is forced inline to the given value.
  When set to false, all width information is removed.
• windowPadding
  integer | array
  0
  This is useful in cases where the window has areas that the dropdown menu should not cover - for instance a fixed header. When set to an integer, the same padding will be added to all sides. Alternatively, an array of integers can be used in the format [top, right, bottom, left].

Events

Bootstrap-select exposes a few events for hooking into select functionality.

hide.bs.select, hidden.bs.select, show.bs.select, and shown.bs.select all have a relatedTarget property, whose value is the toggling anchor element.

• show.bs.select
  This event fires immediately when the show instance method is called.
• shown.bs.select
  This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
• hide.bs.select
  This event is fired immediately when the hide instance method has been called.
• hidden.bs.select
  This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).
• loaded.bs.select
  This event fires after the select has been initialized.
• rendered.bs.select
  This event fires after the render instance has been called.
• refreshed.bs.select
  This event fires after the refresh instance has been called.
• changed.bs.select
  This event fires after the select’s value has been changed. It passes through event, clickedIndex, newValue, oldValue.

$(‘#mySelect‘).on(‘hidden.bs.select‘, function (e) {  // do something...});

method

.selectpicker(‘val’)

You can set the selected value by calling the val method on the element.

$(‘.selectpicker‘).selectpicker(‘val‘, ‘Mustard‘);
$(‘.selectpicker‘).selectpicker(‘val‘, [‘Mustard‘,‘Relish‘]);

This is different to calling val() directly on the select element. If you call val() on the element directly, the bootstrap-select ui will not refresh (as the change event only fires from user interaction). You will have to call the ui refresh method yourself.

$(‘.selectpicker‘).val(‘Mustard‘);
$(‘.selectpicker‘).selectpicker(‘render‘);// this is the equivalent of the above
$(‘.selectpicker‘).selectpicker(‘val‘, ‘Mustard‘);

.selectpicker(‘selectAll’)

This will select all items in a multi-select.

$(‘.selectpicker‘).selectpicker(‘selectAll‘);

.selectpicker(‘deselectAll’)

This will deselect all items in a multi-select.

$(‘.selectpicker‘).selectpicker(‘deselectAll‘);

.selectpicker(‘render’)

You can force a re-render of the bootstrap-select ui with the render method. This is useful if you programatically change any underlying values that affect the layout of the element.

$(‘.selectpicker‘).selectpicker(‘render‘);

.selectpicker(‘mobile’)

Enable mobile scrolling by calling $(‘.selectpicker’).selectpicker(‘mobile’). This enables the device’s native menu for select menus.

The method for detecting the browser is left up to the user.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {  
$(‘.selectpicker‘).selectpicker(‘mobile‘);
}

.selectpicker(‘setStyle’)

Modify the class(es) associated with either the button itself or its container.

If changing the class on the container:

$(‘.selectpicker‘).addClass(‘col-lg-12‘).selectpicker(‘setStyle‘);

If changing the class(es) on the button (altering data-style):

// Replace Class
$(‘.selectpicker‘).selectpicker(‘setStyle‘, ‘btn-danger‘);
// Add Class
$(‘.selectpicker‘).selectpicker(‘setStyle‘, ‘btn-large‘, ‘add‘);
// Remove Class
$(‘.selectpicker‘).selectpicker(‘setStyle‘, ‘btn-large‘, ‘remove‘);

.selectpicker(‘refresh’)

To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

$(‘.selectpicker‘).selectpicker(‘refresh‘);

<select class="selectpicker remove-example">  
<option value="Mustard">Mustard</option>  
<option value="Ketchup">Ketchup</option>  
<option value="Relish">Relish</option>
</select>
<button class="btn btn-warning rm-mustard">Remove Mustard</button>
<button class="btn btn-danger rm-ketchup">Remove Ketchup</button>
<button class="btn btn-success rm-relish">Remove Relish</button>

$(‘.rm-mustard‘).click(function () {  
    $(‘.remove-example‘).find(‘[value=Mustard]‘).remove();  
    $(‘.remove-example‘).selectpicker(‘refresh‘);
});

$(‘.ex-disable‘).click(function () {  
    $(‘.disable-example‘).prop(‘disabled‘, true);  
    $(‘.disable-example‘).selectpicker(‘refresh‘);
});

$(‘.ex-enable‘).click(function () {  
    $(‘.disable-example‘).prop(‘disabled‘, false);  
    $(‘.disable-example‘).selectpicker(‘refresh‘);
});

.selectpicker(‘toggle’)

Programmatically toggles the bootstrap-select menu open/closed.

$(‘.selectpicker‘).selectpicker(‘toggle‘);

.selectpicker(‘hide’)

To programmatically hide the bootstrap-select use the hide method (this only affects the visibility of the bootstrap-select itself).

$(‘.selectpicker‘).selectpicker(‘hide‘);

.selectpicker(‘show’)

To programmatically show the bootstrap-select use the show method (this only affects the visibility of the bootstrap-select itself).

$(‘.selectpicker‘).selectpicker(‘show‘);

.selectpicker(‘destroy’)

To programmatically destroy the bootstrap-select, use the destroy method.

$(‘.selectpicker‘).selectpicker(‘destroy‘);

案例分析

项目中需要二级联动,第一级为”主机列表”,第二级为”服务列表”,web视图如下:

第一级(地址):

第二级(类型):

具体步骤:

• 选中第一级某一个项目
• AJAX动态获取第二级列表数据

HTML代码:

<div class="row form-group">    
    <label class="col-xs-2 col-md-2 col-sm-2 control-label">地址:</label>    
    <div class="col-xs-6 col-md-6 col-sm-6">        
        <select id="micro-service-hostip-text" name="micro-service-hostip-text" class="selectpicker show-tick form-control" data-live-search="true" data-size="5" onchange=‘get_host_services()‘>            
            <option value="" selected="selected">请选择</option>            
            <option value="10.68.7.181">10.68.7.181</option>            
            <option value="10.68.7.182">10.68.7.182</option>        
        </select>    
    </div>
</div>
<div class="row form-group">    
    <label class="col-xs-2 col-md-2 col-sm-2 control-label">类型:</label>    
    <div class="col-xs-6 col-md-6 col-sm-6">        
        <select id="micro-service-dependent-service-name" name="micro-service-dependent-service-name" class="selectpicker show-tick form-control" data-live-search="true" data-size="5">            
            <option value="" selected="selected">请选择</option>        
        </select>    
    </div>
</div>

selectpicker初始化:

$(‘#micro-service-hostip-text‘).selectpicker({‘selectedText‘: ‘micro-service-host‘});
$(‘#micro-service-dependent-service-name‘).selectpicker({‘selectedText‘: ‘micro-service-name‘});

AJAX获取第二级数据:

 $.ajax({     
     type:"POST",     
     url:"/project/get_host_services/",     
     data:send_data,     
     datatype:"json",     
     success:function(data){         
     var dataJson = JSON.parse(data);         
     if (dataJson.result == "True"){             
         var service_node = document.getElementById("micro-service-dependent-service-name");             
         service_node.length = 1;             
         for (var key in dataJson.services) {                 
             var serviceOption = document.createElement(‘option‘);                 
             serviceOption.value = serviceOption.text = dataJson.services[key];                 
             service_node.options.add(serviceOption);             
         }             
         $(‘#micro-service-dependent-service-name‘).selectpicker(‘refresh‘);         
     }         
     else         
     {             
         showWarning("micro-service-create-warning-div",dataJson.warn);         
     }     
     },     
     error:function(){         
         showWarning("micro-service-create-warning-div","数据获取失败,请重试");
     } 
 })

特别需要注意的是:

$(‘#micro-service-dependent-service-name‘).selectpicker(‘refresh‘);

由于第二级是动态数据,虽然之前我们执行了:

$(‘#micro-service-dependent-service-name‘).selectpicker({‘selectedText‘: ‘micro-service-name‘});

但是如果不刷新的话,web页面是不显示获取到的数据的.