text

Preface: I have shared two articles before bootstrap Components of drop-down box: JS component series -- a big competition between two bootstrap multiselect components   and   JS component series - Summary of Bootstrap Select2 component usage  ， I received a lot of concerns and questions from many garden friends. Finally, I summarized that there are some large and small problems in the drop-down box components in these two articles, such as the two bootstrap mutiselect components, and the interface rendering effect is slightly poor; For another example, some compatibility problems of select2 and multi-choice value assignment have plagued bloggers and many garden friends. The drop-down box in the project has long been replaced with this component introduced today, so it's good to introduce it to you today to make you have one more choice! Thank you for your continued attention!

A digression. Originally, this article was ready to be written, but recently, the project was ready to take the front-end development route, but the bloggers were busy. For a time, Node.js, npm, webpack, react, react router, ant.design and other technologies had to be learned. The brain is really a good thing. It can accommodate so many new knowledge at once. Although all kinds of things are not suitable, it gradually gets used to it over time, Fortunately, bloggers often pay attention to this technology, so it's not so hard to learn. About vue and react, many group friends have discussed their advantages and disadvantages. In fact, bloggers don't think which component is better. The key depends on what kind of ecology the project adapts to. A large part of the reason why we choose react is that we pay attention to the effect of ant.design and rich component library. Well, let's get off the point. Let's talk about it in detail when bloggers share the front-end environment in the future.

Original address of this article: http://www.cnblogs.com/landeanfen/p/7457283.html

1, Component open source address and API description

Bootstrap select open source address: https://github.com/silviomoreto/bootstrap-select

Bootstrap select usage example: http://silviomoreto.github.io/bootstrap-select/examples/

Bootstrap select document description: http://silviomoreto.github.io/bootstrap-select/options/

2, Component effect example

At first sight

Multi selection effect

Configurable search function

Group selected

Set the maximum number of selected items to 2

 

  Customize the description Title, for example, we define it as "please select a province"

  In some cases, if the number of multiple selections is large, we can display "thumbnail mode". For example, when more than two items are selected

custom style

Display icon with text

Show colored labels

Expand to display the maximum number of configurable items. It is better to display 3 items at most

  Select all and invert

The above are some common functions. For more effects, you can see the official examples!

3, Use example

1. Basic example

Since it is bootstrap select, the component must depend on bootstrap, and bootstrap depends on jquery. Therefore, the following files must be referenced when using the component.

<link href="Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />

<script src="Content/jquery-1.9.1.min.js"></script>
<script src="Content/bootstrap/js/bootstrap.min.js"></script>
<script src="Content/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="Content/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>

Last file   defaults-zh_CN.min.js   It is not required. It is only necessary to reference the culture in the component.

It is easier to use. You can initialize directly using class without any js.

<select class="selectpicker">
    <option value="1">Guangdong Province</option>
    <option value="2">Guangxi Province</option>
    <option value="3">Fujian Province</option>
    <option value="4">Hunan Province</option>
    <option value="5">Shandong Province</option>                            
</select>

Add a select picker style to a select tag.

If you choose more, you don't have to say more

<select class="selectpicker" multiple>
    <option value="1">Guangdong Province</option>
    <option value="2">Guangxi Province</option>
    <option value="3">Fujian Province</option>
    <option value="4">Hunan Province</option>
    <option value="5">Shandong Province</option>                            
</select>

2. Other effect examples

The above is the simplest use. Here are some common effects to give code examples. Experts please skip this paragraph directly.

Add search function to components

<select class="selectpicker" multiple data-live-search="true">
    <option value="1">Guangdong Province</option>
    <option value="2">Guangxi Province</option>
    <option value="3">Fujian Province</option>
    <option value="4">Hunan Province</option>
    <option value="5">Shandong Province</option>                            
</select>

Option grouping

<select class="form-control selectpicker" data-live-search="true" multiple>
        <optgroup label="Guangdong Province">
                <option value="1">Guangzhou City</option>
                <option value="2">Shenzhen City</option>
                <option value="3">Zhuhai</option>
         </optgroup>   
          <optgroup label="Guangxi">
                  <option value="1">Nanning</option>
                  <option value="2">city in Guangxi</option>
                  <option value="3">Guilin City</option>
           </optgroup>  
           <optgroup label="Shandong">
                   <option value="1">Yantai</option>
                   <option value="2">Qingdao</option>
                   <option value="3">Jinan</option>
             </optgroup>                          
</select>

Set the maximum number of selected items to 2

<select class="selectpicker" multiple data-live-search="true" data-max-options="2">
    <option value="1">Guangdong Province</option>
    <option value="2">Guangxi Province</option>
    <option value="3">Fujian Province</option>
    <option value="4">Hunan Province</option>
    <option value="5">Shandong Province</option>                            
</select>

In the abbreviated mode, for example, when the selected value is greater than 3, only the number of selected items is displayed. Note that this attribute is only effective for multiple selections

<select class="selectpicker" multiple data-live-search="true" data-selected-text-format="count > 3">
    <option value="1">Guangdong Province</option>
    <option value="2">Guangxi Province</option>
    <option value="3">Fujian Province</option>
    <option value="4">Hunan Province</option>
    <option value="5">Shandong Province</option>                            
</select>

Show colored labels

 <select class="form-control selectpicker" title="Please select a province" multiple>
                        <option data-content="<span class='label label-success'>Guangdong Province</span>">Guangdong Province</option>    
                        <option data-content="<span class='label label-info'>Guangxi Province</span>">Guangxi Province</option>  
                        <option data-content="<span class='label label-warning'>Fujian Province</span>">Fujian Province</option>  
                        <option data-content="<span class='label label-danger'>Shandong Province</span>">Shandong Province</option>                        
</select>

Default style selection

<select class="selectpicker" data-style="btn-primary">
  ...
</select>

<select class="selectpicker" data-style="btn-info">
  ...
</select>

<select class="selectpicker" data-style="btn-success">
  ...
</select>

<select class="selectpicker" data-style="btn-warning">
  ...
</select>

<select class="selectpicker" data-style="btn-danger">
  ...
</select>

3. Component value assignment

The above are some things about the initialization of components. Generally, we need to value and assign values to components. How should we operate.

3.1 component value

Keep the original jquery method for component values, such as   var   value = $('#sel').val();   Is this simple? It should be noted that if multiple choices are made, the value variable obtained here is an array variable, such as ['1 ',' 2 ',' 3 '].

3.2 component assignment

The component assignment needs to be changed slightly if you directly  $ ('#sel').val('1');   This assignment will be invalid. The correct assignment method is:

$('.selectpicker').selectpicker('val', '1');

In some usage scenarios of cascading selection, it is often necessary to trigger the change event of the component during assignment. We can do this.

$('.selectpicker').selectpicker('val', '1').trigger("change");

The same is true for multi-choice assignment

$('.selectpicker').selectpicker('val', ['1','2','3']).trigger("change");

4. Other uses of components

Select all:  $ ('.selectpicker').selectpicker('selectAll');  

Reverse selection:  $ ('.selectpicker').selectpicker('deselectAll');  

Adapt to phone mode:  $ ('.selectpicker').selectpicker('mobile');  

Component disable:

$('.disable-example').prop('disabled', true);
$('.disable-example').selectpicker('refresh');

Component enable:

$('.disable-example').prop('disabled', false);
$('.disable-example').selectpicker('refresh');

Component destruction:

$('.selectpicker').selectpicker('destroy');

5. Component encapsulation

There are so many introductions about component initialization above, which are all initialized through class='selectpicker '. In many cases, our select options are dynamically obtained and then initialized. Therefore, bloggers carefully look for the api to see if there is remote data acquisition. Unfortunately, the component does not support this method of remote data acquisition. It doesn't matter. How difficult is it for us to encapsulate an ajax request and then construct the option dynamically? Here we have to mention the original article on encapsulating js components. We follow That article Just encapsulate one. A reference is given below.

  

  After such encapsulation, we can directly use the following code to initialize the component.

$('#sel').bootstrapSelect({
    url:'/a/b',
    data: {},
    valueField: 'value',
    textField: 'text',
});