JSFiddle - React, Tailwind, and code Playground
by bnlonq1022
HTML
<link type="text/css" rel="stylesheet" href="http://jqselectable.googlecode.com/svn/trunk/skin/selectable/style.css" />
<script type="text/javascript" src="http://jqselectable.googlecode.com/svn/trunk/js/jQselectable.js"></script>
<select id="teaMenu" name="teaMenu">
<optgroup label="茗茶類">
<option value="A1">紅茶</option>
<option value="A2">綠茶</option>
<option value="A3">冬瓜茶</option>
<option value="A4">青茶</option>
<option value="A5">烏龍綠茶</option>
<option value="A6">蜜茶</option>
<option value="A7">百香綠茶</option>
<option value="A8">多多綠茶</option>
</optgroup>
<optgroup label="奶茶類">
<option value="B1">奶茶</option>
<option value="B2">鮮奶茶</option>
<option value="B3">烏龍奶茶</option>
<option value="B4">珍珠奶茶</option>
<option value="B5">布丁奶茶</option>
</optgroup>
<optgroup label="原汁類">
<option value="C1">金桔檸檬</option>
<option value="C2">百香果汁</option>
<option value="C3">檸檬汁</option>
<option value="C4">葡萄柚汁</option>
<option value="C5">檸檬梅子</option>
<option value="C6">蜂蜜檸檬</option>
<option value="C7">柚蜜綠</option>
</optgroup>
<optgroup label="特調類">
<option value="D1">阿華田</option>
<option value="D2">檸檬冬瓜</option>
<option value="D3">檸檬紅/綠/青</option>
<option value="D4">檸檬愛玉</option>
</optgroup>
<optgroup label="養生類">
<option value="E1">綠豆湯</option>
<option value="E2">紅豆湯</option>
<option value="E3">桂圓紅棗</option>
</optgroup>
</select>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
JavaScript
$(function($) {
$("#teaMenu").jQselectable({
set: "fadeIn",
setDuration: "fast",
opacity: .7
});
});