智能补全模糊查询select2的下拉选择框使用

我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录select2的使用。

应用bootstrap模板

基础项目源码下载地址为:

SpringMVC+Shiro+MongoDB+BootStrap基础框架

我们在基础项目中已经做好了首页index的访问。

现在就在index.jsp页面上做修改，实现select2的下拉选择框。

select2实现

首先我们来实现select的下拉选择框

index.jsp的代码如下:

<%@ include file="./include/header.jsp"%>


        

            



                

                    

                        

                            Select2 下拉框
                        
                    
                
                

     

                 

                        选择框:
                    

                        
                            - 篮球 -
                            - 足球 -
                            - 游泳 -
                        
                    
                
             
           
  
                
            
            
        
        

    
        
 <%@ include file="./include/footer.jsp"%>

效果如图:

原生的select对少量的选项来说是足够使用的。但是当我们的选项有很多时，比如几十个选项。则需要使用select2。

select2实现了智能补全，模糊查询。也就是我们在select2中输入某个字就能找到相应的选项。

首先

需要把select2插件的代码放入项目中。

插件下载:

select2插件资源

select2需要加载css和js资源:

然后在js中把select初始化成select2,type是select的id:

这样下拉框就支持智能补全和模糊查询了。

修改后的index.jsp代码如下:

<%@ include file="./include/header.jsp"%>




        

            



                

                    

                        

                            Select2 下拉框
                        
                    
                
                

     

                 

                        选择框:
                    

                        
                            - 篮球 -
                            - 足球 -
                            - 游泳 -
                        
                    
                
             
           
  
                
            
            
        
        

    

        
        


 <%@ include file="./include/footer.jsp"%>

效果如图:

提交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;