js jq --bootstrap-select

简介：

基于jq的 下拉框

bootstrap-select 是基于 jQuery v1.9.1 +，Bootstrap的dropdown.js组件和Bootstrap的CSS

Bootstrap 4仅适用于bootstrap-select v1.13.0 +

bootstrap-select :git 地址：https://github.com/snapappointments/bootstrap-select

用法：

将selectpicker类添加到select元素以自动初始化bootstrap-select。

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

实例：

 <select  class=" selectpicker" data-live-search="true" id="ruleSeleted" name="ruleSeleted"   >
 </select>

<script src="/static/plugin/jquery/jquery-1.10.2.min.js"></script>
<script src="/static/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/plugin/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="/static/plugin/jquery/template-web.js"></script>

<script type="text/html" id="rule_temp">
    <option value=""></option>
    {{ each list item index}}
    <option value="{{item.ruleId}}" data-code="{{item.ruleId}}" data-name="{{item.ruleName}}" data-state="{{item.ruleState}}" data-type="{{item.ruleType}}">{{item.ruleName}}</option>
    {{/each}}
</script>

 bootstrap已经对select初始化渲染后，会在ul标签中追加li标签属性。

我再开发中 发现 动态添加的option没有显示 ，是因为此li标签中没有值。

处理：应该在动态添加 option后，重新渲染;

$('#ruleSeleted').selectpicker('refresh');//使用refresh方法更新UI以匹配新状态。

$('#ruleSeleted').selectpicker('render');//render方法强制重新渲染引导程序 - 选择ui。

$.ajax({
        "url":path + "XXXX",
        "type":"POST",
        success:function(res){
            var enentRulehtml = template('rule_temp',{
                list:res
            })
            $('#ruleSeleted').html(enentRulehtml)
            //使用refresh方法更新UI以匹配新状态。
            $('#ruleSeleted').selectpicker('refresh');
            //render方法强制重新渲染引导程序 - 选择ui。
            $('#ruleSeleted').selectpicker('render');
       }
}）

赋值select默认选中的值：

 $('.selectpicker').selectpicker('val', r.RULE_ID);

添加 multiple="multiple" 设置 多选

<select id ="weatherType" name="weatherType" class="form-control selectpicker" multiple="multiple" title="请选择">
 
</select>

多选框取值，多选的值会自动用逗号分隔开

$("#weatherType").val()

提交数据时将表单序列化：

var formData = $("#createUserForm").serialize();

val()只能取到一个选中的值，无法传入多选的值解决：

$("#weatherType").change(function(){
            $("input[name=weatherType1]").val($("#weatherType").val())
    })

多选框的赋值：

$("#weatherType").selectpicker ("val",weatherType).trigger("change");

更多效果 可以查看 https://www.cnblogs.com/dongh/p/9582728.html

中文文档 ：https://www.bootstrapselect.cn/options.html