tw-better-select
v1.0.5
Published
Automatically grouping select options based on first character's phonetic symbol (Taiwanese).
Downloads
10
Readme
Taiwan Better Select
Automatically grouping select options based on first character's phonetic symbol (Taiwanese).
CDN
<script src="https://unpkg.com/[email protected]/dist/tw-better-select.min.js"></script>Download compressed file
https://unpkg.com/[email protected]/dist/tw-better-select.min.js.gzExample
<html>
<header>
<title>Tw Better Select Demo</title>
</header>
<body>
<select id="district" style="width: 120px">
<option value="永和區">永和區</option>
<option value="中和區" selected>中和區</option>
<option value="金山區">金山區</option>
<option value="板橋區">板橋區</option>
<option value="汐止區">汐止區</option>
<option value="深坑區">深坑區</option>
<option value="石碇區">石碇區</option>
<option value="瑞芳區">瑞芳區</option>
<option value="平溪區">平溪區</option>
<option value="土城區">土城區</option>
<option value="三峽區">三峽區</option>
<option value="樹林區">樹林區</option>
<option value="鶯歌區">鶯歌區</option>
<option value="三重區">三重區</option>
<option value="新莊區">新莊區</option>
<option value="泰山區">泰山區</option>
<option value="蘆洲區">蘆洲區</option>
<option value="林口區">林口區</option>
<option value="五股區">五股區</option>
<option value="八里區">八里區</option>
<option value="淡水區">淡水區</option>
<option value="三芝區">三芝區</option>
<option value="石門區">石門區</option>
<option value="雙溪區">雙溪區</option>
<option value="貢寮區">貢寮區</option>
<option value="新店區">新店區</option>
<option value="坪林區">坪林區</option>
<option value="烏來區">烏來區</option>
</select>
</body>
<script src="https://unpkg.com/[email protected]/dist/tw-better-select.min.js"></script>
<script>
// if statement is for backward compatibility since unpkg is not guarantee 100% uptime even though is is backed by CloudFlare
if (typeof TwBetterSelect !== 'undefined') {
const select = new TwBetterSelect('district');
}
</script>
</html>Result:
Methods:
1. refresh()
options inside the select tag will be re-rendered. useful when you need to fetch options from remote resources or dynamically change the select options based other other configuration.
const select = new TwBetterSelect('select-id');
select.refresh();Properties:
1. optGroups
a collection of nodes for option groups and the options for each of the group
const select = new TwBetterSelect('select-id');
select.optGroups[0]; // this will be <optgroup></optgroup>
select.optGroups[0][0]; // this will be the <option></option> for child node of <optgroup></optgroup> above