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页面是不显示获取到的数据的. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |