您好,登錄后才能下訂單哦!
背景
公司的小二后臺有一個下拉框選擇經銷商的功能,由于選擇的經銷商過多,因此添加搜索功能。
前提
配置好Bootstrap相關的開發環境
主要內容
<div class="form-group"> <label class="col-sm-3 control-label" for="state">經銷商信息</label> <div class="col-sm-3"> <select name="dealer_id" id="dealer_id" class="selectpicker show-tick form-control" data-width="98%" data-first-option="false" title='請選擇經銷商(必選)' required data-live-search="true"> <#foreach dealer in dealerList> <option value="${dealer.id?c}">${dealer.name!}</option> </#foreach> </select> </div> </div>
其中最主要的是select標簽中的兩個屬性: class=”selectpicker show-tick form-control” 和 required data-live-search=”true” 。數據展示中foreach是模版引擎freemarker的循環遍歷列表語句,當然測試時,您可以列幾個option標簽數據。
效果圖:
以上這篇使用bootstrap實現下拉框搜索功能的實例講解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。