随着项目的进展，测试工程师在更多的浏览器中兼容性测试中，发现有些浏览器不支持option的触发事件，这就造成了先前一篇博文bootstrap 左右框多项选择示例
中左右选择框的失效，于是我就由原先的select-option结构 改成了 现在的 ul-li 结构，并写成了js插件的形式，方便以后调用和修改，并在多个浏览器测试中得到验证：
实现的页面如下：
jsp页面的修改如下：
1 <div id="province_dchannel"> 2 <div class="panel panel-default"> 3 <!-- Default panel contents --> 4 <div class="panel-heading">选择省份</div> 5 <fieldset> 6 <table class="table table-bordered dchannel-table"> 7 <tbody> 8 <tr class="item-default"> 9 <td align="right"> 10 <div class="has-feedback"> 11 <label class="control-label sr-only" for="search_province_repo"></label> 12 <input type="text" class="form-control search-for-select phone1" id="search_province_repo" placeholder="Search" forselect="sel_all_area" /> 13 <span class="glyphicon glyphicon-search form-control-feedback" style="height:40px;line-height:40px;margin-right:-10px;"></span> 14 <div style="padding-top:8px;"> 15 <%-- <select id="sel_all_area" multiple="multiple" size="10" style="width:100%;height:222px;"> 16 <c:forEach items="${unselectedAreas}" var="area" varStatus="loop"> 17 <option value="${area.code}">${area.name}(${area.code})</option> 18 </c:forEach> 19 </select> --%> 20 <ul id="sel_all_area" style="width:100%;height:222px;border-radius:0px;overflow-y: scroll;padding-left:10px;text-align:left;"> 21 <c:forEach items="${unselectedAreas}" var="area" varStatus="loop"> 22 <li class="proxy_li" data="${area.code}">${area.name}(${area.code})</li> 23 </c:forEach> 24 </ul> 25 </div> 26 </div> 27 28 </td> 29 <td style="width: 50px;" valign="middle"> 30 <div style="padding-top:38px;"> 31 <button type="button" class="btn btn-default btn-small gr" id="btn_select_all_area"><span class="glyphicon glyphicon-forward"></span></button> 32 <button type="button" class="btn btn-default btn-small gr" id="btn_choose_selected_area"><span class="glyphicon glyphicon-chevron-right"></span></button> 33 <button type="button" class="btn btn-default btn-small gr" id="btn_remove_selected_area"><span class="glyphicon glyphicon-chevron-left"></span></button> 34 <button type="button" class="btn btn-default btn-small gr" id="btn_remove_all_area"><span class="glyphicon glyphicon-backward"></span></button> 35 </div> 36 </td> 37 <td style="width: 45%;"> 38 <div class="has-feedback"> 39 <label class="control-label sr-only" for="search_province_select"></label> 40 <input type="text" class="form-control search-for-select phone1" id="search_province_select" placeholder="Search" forselect="sel_selected_areas"> 41 <span class="glyphicon glyphicon-search form-control-feedback" style="height:40px;line-height:40px;margin-right:-10px;"></span></input> 42 <div style="padding-top:8px;"> 43 <%-- <select id="sel_selected_areas" multiple="multiple" size="10" style="width:100%;height:222px;"> 44 <c:forEach items="${selectedAreas}" var="area" varStatus="loop"> 45 <option value="${area.code}">${area.name}(${area.code})</option> 46 </c:forEach> 47 </select> --%> 48 <ul id="sel_selected_areas" style="width:100%;height:222px;border-radius:0px;overflow-y: scroll;padding-left:10px;text-align:left;"> 49 <c:forEach items="${selectedAreas}" var="area" varStatus="loop"> 50 <li class="proxy_li" data="${area.code}">${area.name}(${area.code})</li> 51 </c:forEach> 52 </ul> 53 </div> 54 </div> 55 </td> 56 </tr> 57 </tbody> 58 </table> 59 </fieldset> 60 </div>