使用select2實現多選select下拉框
阿新 • • 發佈：2019-01-26
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <link type="text/css" rel="stylesheet" href="C:/Users/Administrator/Desktop/select2Demo/bootstrap.min.css"/> <link type="text/css" rel="stylesheet" href="C:/Users/Administrator/Desktop/select2Demo/select2.min.css"/> <script type="text/javascript" src="C:/Users/Administrator/Desktop/select2Demo/jquery-1.7.1.js"></script> <script type="text/javascript" src="C:/Users/Administrator/Desktop/select2Demo/select2.js"></script> </head> <body> <div id="body"> <table class="table table-bordered table-striped" width="800" border="none" cellspacing="0" cellpadding="0"> <tbody> <tr> <td align="right">多選標籤：</td> <td> <select class="combox" id="sel_productTag" name="tagId" multiple> <optgroup label="子輩"> <option value="kakaxi">卡卡西</option> <option value="mingren">鳴人</option> <option value="zuozhu">佐助</option> <option value="xiaoying">小櫻</option> </optgroup> <optgroup label="父輩"> <option value="bofengshuimen">波風水門</option> <option value="dashewan">大蛇丸</option> <option value="gangshou">綱手</option> <option value="自來也">自來也</option> </optgroup> </select> </td> </tr> <tr> <td align="right">單選標籤：</td> <td> <select class="combox" id="sel_recommender" name="recommenderId"> <option value="">請選擇...</option> <optgroup label="子輩"> <option value="kakaxi">卡卡西</option> <option value="mingren">鳴人</option> <option value="zuozhu">佐助</option> <option value="xiaoying">小櫻</option> </optgroup> <optgroup label="父輩"> <option value="bofengshuimen">波風水門</option> <option value="dashewan">大蛇丸</option> <option value="gangshou">綱手</option> <option value="自來也">自來也</option> </optgroup> </select> </td> </tr> </tbody> </table> </div> <script type="text/javascript"> $(function(){ $('#sel_productTag').select2({ placeholder: "請至少選擇一個人名", tags:true, createTag:function (decorated, params) { return null; }, width:'256px' }); function formatState (state) { if (!state.id) { return state.text; } var $state = $( '<span>' + state.text + '</span>' ); return $state; }; $('#sel_recommender').select2({ placeholder: "請選擇一個人名", templateResult: formatState, width:'256px' }); }); </script> </body> </html>
