jQuery multiselect 是一個方便易用的多選下拉框插件,為用戶提供了便捷的選擇多個選項的方式。下面是使用 jQuery multiselect 的下載方法。
<!-- 引入 jQuery 庫和 multiselect 文件 --> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.min.js"></script>
下載后,我們還需要初始化插件,為其提供一些基本參數。以下是一個基本的初始化示例:
<select id="example-select" multiple="multiple"> <option value="1">選項1</option> <option value="2">選項2</option> <option value="3">選項3</option> <option value="4">選項4</option> </select> <script> $(document).ready(function() { $('#example-select').multiSelect(); }); </script>
在上述示例中,我們為一個 id 為 example-select 的 select 元素添加了多選屬性,初始化了 multiSelect 插件。
我們還可以在初始化時提供一些參數,自定義插件的表現形式。以下是一個更為復雜的初始化示例:
<select id="example-select2" multiple="multiple"> <option value="1">選項1</option> <option value="2">選項2</option> <option value="3">選項3</option> <option value="4">選項4</option> </select> <script> $(document).ready(function() { $('#example-select2').multiSelect({ selectableHeader: "<div class='custom-header'>可選選項</div>", selectionHeader: "<div class='custom-header'>已選選項</div>", selectableFooter: "<div class='custom-footer'><input type='text' placeholder='搜索可選選項...'></div>", selectionFooter: "<div class='custom-footer'><input type='text' placeholder='搜索已選選項...'></div>", keepRenderingSort: true, afterInit: function(ms) { ms.$selectableUl.find('li:first-child').addClass('active'); ms.$selectionUl.find('li:first-child').addClass('active'); } }); }); </script>
在上述示例中,我們自定義了插件的表頭和表尾,使其更符合實際的使用場景,同時開啟了 keepRenderingSort 參數,可以在進行選擇時按原始順序顯示,提高了用戶體驗。
通過以上示例,可見 jQuery multiselect 下載使用非常簡單,同時也提供了豐富的功能和參數,能夠讓你的多選下拉列表更加靈活、便捷。若您需要更深入地了解 multiSelect 插件的使用方法,請查看官方文檔并進行實踐。