简介：
基于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");