我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录select2的使用。
应用bootstrap模板
基础项目源码下载地址为:
SpringMVC+Shiro+MongoDB+BootStrap基础框架
我们在基础项目中已经做好了首页index的访问。
现在就在index.jsp页面上做修改，实现select2的下拉选择框。
select2实现
首先我们来实现select的下拉选择框
index.jsp的代码如下:
<%@ include file="./include/header.jsp"%><div id="page-wrapper"><div id="page-inner"><div class="row"><div class="col-md-12"><h1 class="page-header">Select2 <small>下拉框</small></h1></div></div><!-- /. ROW --><form class="form-horizontal" id="navigation"><div class="form-group"><label for="sourceId" class="col-sm-2 control-label">选择框:</label><div class="col-sm-8 input-group"><select class="form-control" id="type" name="type"><option value="" data-name="">- 篮球 -</option><option value="" data-name="">- 足球 -</option><option value="" data-name="">- 游泳 -</option></select></div></div></form> <!-- /. ROW --></div><!-- /. PAGE INNER --></div><!-- /. PAGE WRAPPER --><%@ include file="./include/footer.jsp"%></body></html>
效果如图:
原生的select对少量的选项来说是足够使用的。但是当我们的选项有很多时，比如几十个选项。则需要使用select2。
select2实现了智能补全，模糊查询。也就是我们在select2中输入某个字就能找到相应的选项。
首先
需要把select2插件的代码放入项目中。
插件下载:
select2插件资源
select2需要加载css和js资源:
<link rel="stylesheet" href="/plugins/select2/dist/css/select2-site.css"type="text/css"></link><script src="/plugins/select2/dist/js/select2.min.js"></script>
然后在js中把select初始化成select2,type是select的id:
<script type="text/javascript">$(document).ready(function () {$('#type').select2();});</script>
这样下拉框就支持智能补全和模糊查询了。
修改后的index.jsp代码如下:
<%@ include file="./include/header.jsp"%><link rel="stylesheet" href="/plugins/select2/dist/css/select2-site.css"type="text/css"></link><div id="page-wrapper"><div id="page-inner"><div class="row"><div class="col-md-12"><h1 class="page-header">Select2 <small>下拉框</small></h1></div></div><!-- /. ROW --><form class="form-horizontal" id="navigation"><div class="form-group"><label for="sourceId" class="col-sm-2 control-label">选择框:</label><div class="col-sm-8 input-group"><select class="form-control" id="type" name="type"><option value="" data-name="">- 篮球 -</option><option value="" data-name="">- 足球 -</option><option value="" data-name="">- 游泳 -</option></select></div></div></form> <!-- /. ROW --></div><!-- /. PAGE INNER --></div><!-- /. PAGE WRAPPER --><%@ include file="./include/footer.jsp"%><script src="/plugins/select2/dist/js/select2.min.js"></script><script type="text/javascript">$(document).ready(function () {$('#type').select2();});</script></body></html>
效果如图:
提交select选择的值
如果select在form表单中，则点击按钮提交表达时，会自动获取到select选择的值，字段名称是select的name。
如果在js中获取select选择的值，使用代码:
JS原生获取
var obj = document.getElementByIdx_x(”testSelect”); //定位id
var index = obj.selectedIndex; // 选中索引
var text = obj.options[index].text; // 选中文本
var value = obj.options[index].value; // 选中值
jQuery中获得选中select值
第一种方式
$('#testSelect option:selected').text();//选中的文本
$('#testSelect option:selected') .val();//选中的值
$("#testSelect").get(0).selectedIndex;//索引
第二种方式
$("#tesetSelect").find("option:selected").text();//选中的文本
$("#tesetSelect").find("option:selected").val();
$("#tesetSelect").find("option:selected").get(0).selectedIndex;
