[研究][ASP.NET][jQuery]Selectize 0.15.2下拉選單
2023-04-02
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#
Selectize 0.15.x
https://selectize.dev/
NuGet Gallery | selectize 0.12.1 (NuGet 沒甚麼在更新)
https://www.nuget.org/packages/selectize
GitHub - selectize/selectize.js 0.15.2 (2022-11-18)
https://github.com/selectize/selectize.js
Selectize：一個基於 jQuery 的可定制的下拉選單插件，支援遠端數據源、分組、選項篩選、自動完成等功能。
HTML 檔案：
<!DOCTYPE html>
<html>
<head>
<title>Selectize Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css" integrity="sha512-qxVSK+5dYR5+ic8IWJWeO5h5Z28lKQq3+O5OJzNEnFyAtwB+0MGvg8Kn1ZQfNxmtRV+GjEsW1d8xncmquJmzmg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<select id="my-select" multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-3jKZI5+6+Pv9WziDX6VxMjmAoj9lOJQ3iCME7A0vwgN49Pv/PbGJpX6N6UO1RX0I63E+GwYs/skFkM61jZuPww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.14.0/js/standalone/selectize.min.js" integrity="sha512-5Lp8vjJhEu5ZGn5vEM2K3AZXfn1TzV6UjydnUuV7UfZCwz15sMMsZsLs9VrU6TJp6m/+K6ravU2VxME94OuZ7g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>
|
JavaScript 檔案 (script.js)：
$(document).ready(function() {
$('#my-select').selectize({
plugins: ['remove_button'],
delimiter: ',',
persist: false,
create: function(input) {
return {
value: input,
text: input
}
}
});
});
|
以上程式碼將會初始化一個帶有 "remove_button" 插件的 Selectize 下拉式選單，並且設定分隔符號為逗號，不保留所選取的選項，允許使用者建立新的選項。
(完)
相關
[研究][ASP.NET][jQuery]Selectize 0.15.2下拉選單
https://shaurong.blogspot.com/2023/04/aspnetjqueryselectize-0152.html
[研究]chosen.jquery, select2, Selectize 差別？年代？優點？缺點？
https://shaurong.blogspot.com/2023/04/chosenjquery-select2-selectize.html
[研究]ASP.NET WebForm 的 chosen 1.8.7、 chosen.jquery 1.8.7範例https://shaurong.blogspot.com/2023/04/aspnet-webform-chosen-187-chosenjquery.html
[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能
[研究][ASP.NET]JavaScript 抓取 ContentPlaceHolder 中 ASP.NET 控制項的 ID
https://shaurong.blogspot.com/2022/04/aspnetmasterpagecontentplaceholder.html
[研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(二)各種ID存取狀況
https://shaurong.blogspot.com/2022/05/aspnetselect2-v403-id.html
[研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(一)初次試用
http://shaurong.blogspot.com/2017/01/caspnet-select2-v403-jquery-plugin.html
沒有留言:
張貼留言