jquery multi-select 简单用法的备份

最新推荐文章于 2024-12-16 10:59:24 发布

pupilman

最新推荐文章于 2024-12-16 10:59:24 发布

阅读量720

点赞数

本文链接：https://blog.csdn.net/weixin_35662923/article/details/61422155

版权

本文介绍了一个使用SpringMVC实现的多选下拉框示例，包括前端页面的搭建、jQuery插件的引入及配置、动态加载选项的AJAX请求处理以及后端控制器对接收到的选择项数组的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控制器SpringMVC

html页面部分

<!DOCTYPE html>
<html>
<head>
    <link href="lou-multi-select-e052211/css/multi-select.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
   
    <select multiple="multiple" id="my-select" name="mySelect[]"></select>
    
    <button id="but" >按钮</button>
</body>
</html>
</html>

js部分

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    
    <script src="lou-multi-select-e052211/js/jquery.multi-select.js" type="text/javascript"></script>
    <script type="text/javascript">
       //页面加载初始化
       $(document).ready(function(){
       var url="auto/all_statement.action";
       ajaxPost(url,callback);
       })
       function ajaxPost(url,ok,data,a){//url:路径，ok：ajax成功后的回调函数，data：ajax的参数，a：是否准许深度序列化。
           if(data==null||data.length==0){
               data=1;
           }
           $.ajax({
               url:url,
               data:data,
               traditional: a,
               type:"post",
               async:true,
               datatype:"json",
               success:ok
           });
       }
       //为下拉列表添加option成功后的回调函数。
       function callback(result){
                $.each(result,function(i,u){
                 $("#my-select").append("<option value="+u.id+">"+u.statement+"</option>")//ajax为下拉列表动态加载option
                });
                $('#my-select').multiSelect();
            }
    $(function(){
       $("button").click(function(){
           var $this=$(this).attr("id");
           //点击按钮将下拉列表的数据传到后台
           if($this=="but"){
               var selecteds=$("[name='mySelect[]']").val();
               var url="auto/select_statement.action";
               ajaxPost(url,suc,{"selecteds":selecteds},true);
           }
       })

    })
    //向后台传数据成功后的回调函数。
    function suc(){
       alert("成功")
    }
    </script>

后台部分,本例只是做了简单的输出。

/**
   *
   * 接收页面传递过来的String[]类型的数据
   *
   * @param selecteds
   *            String[]
   * @return
   */
   @RequestMapping("/select_statement.action")
   @ResponseBody
   public boolean selectStatement(String[] selecteds) {
       for (int i = 0; i < selecteds.length; i++) {
           System.out.println(selecteds[i]);// 简单的做个输出
       }
       return false;
   }