Bootstrap-Select插件
|
Bootstrap Select 是使用按钮下拉的 Bootstrap 风格的自定义的选项和多选。 optionOptions 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
EventsBootstrap-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.
$('#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',?'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视图如下:
第一级(地址):
第二级(类型):
具体步骤:
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页面是不显示获取到的数据的. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
