实现select下拉框多选

最新推荐文章于 2024-06-19 09:33:02 发布

lwh_zfj

最新推荐文章于 2024-06-19 09:33:02 发布

阅读量3.5w

点赞数 8

分类专栏：工作经验文章标签：工作

本文链接：https://blog.csdn.net/lwh_zfj/article/details/72571775

版权

工作经验专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天是我第一次写博客，开始可能写得不好，但是我相信会越来越好的，加油吧，今天就从解决一个问题开始吧。

今天记录一个问题，在工作中遇到一这个问题，解决下拉框多选问题并且传值到后台的具体实现。废话不多说啦，直接开始来呗：

1、页面中导入需要的js

<script type="text/javascript" src="${path }/myjs/jquery.min.js"></script>
    <script type="text/javascript" src="${path }/myjs/bootstrap.min.js"></script>
    <script type="text/javascript" src="${path }/myjs/multiple-select.js"></script>
    <link rel="stylesheet" href="${path }/mycss/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="${path }/mycss/multiple-select.css" type="text/css"/>

上面是基于bootstrap的，不过bootstrap也是依赖于jquery的，所以也是需要引入jquery的js哟，今天要解决是多选框，所以嘛multiple-select.js这个也是非常重要的，资源获取地址：
select多选下拉框js实现下载

2、jsp详细页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" src="${path }/myjs/jquery.min.js"></script>
    <script type="text/javascript" src="${path }/myjs/bootstrap.min.js"></script>
    <script type="text/javascript" src="${path }/myjs/multiple-select.js"></script>
    <link rel="stylesheet" href="${path }/mycss/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="${path }/mycss/multiple-select.css" type="text/css"/>
  </head>

  <body>
     <form id="selectForm" action="${path}/selectmore/myselectmore.action" method="post" class="definewidth m20">
        <table class="table table-bordered table-hover definewidth m10">
            <tr>
                <td width="10%" class="tableleft">用户名：</td>
                <td><input type="text" name="username" id="username"/>
                </td>
            </tr>
             <tr>
                <td width="10%" class="tableleft">密码：</td>
                <td><input type="password" name="pwd" id="pwd"/>
                </td>
            </tr>
            <tr>
                <td width="10%" class="tableleft">多选值测试：</td>
                <td>
                     <select id="example-getting-started" name="ttt" multiple="multiple">
                            <option value="1">南山区</option>
                            <option value="2">宝安区</option>
                            <option value="3">福田区</option>
                            <option value="4">盐田区</option>
                            <option value="5">罗湖区</option>
                            <option value="6">龙岗区</option>
                     </select>
                      <input type="hidden" name="morezeng" id="morezeng"/>
                </td>
            </tr>
            <tr>
                <td width="10%" class="tableleft">备注：</td>
                <td>
                    <textarea rows="5" cols="50" id="remark" name="remark"></textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2">
<!--                    <button type="submit" class="btn btn-primary" type="button">保存</button>  -->
                    <input type="reset" class="btn btn-primary" value="重置"/>
                    <input type="button" value="确认提交" class="btn btn-success" onclick="getConfirm();"/>
               </td>
            </tr>
        </table>
    </form>
  </body>

  <script type="text/javascript">
    $(document).ready(function() {
        $('#example-getting-started').multipleSelect({
            width: 260,
            multipleWidth: 55,
            selectAll:false
        });
    });
    function getConfirm()
    {
        debugger;
        alert($('#example-getting-started').multipleSelect('getSelects','value'));
        var selectValue = $('#example-getting-started').multipleSelect('getSelects','value');
        console.log(selectValue);
        $("#morezeng").val(selectValue);
        $("#selectForm").submit();
    }

  </script>
</html>

上面的内容是自己做测试用的，

当页面首次加载的时候会执行这个方法：

$(document).ready(function() {
        $('#example-getting-started').multipleSelect({
            width: 260,
            multipleWidth: 55,
            selectAll:false
        });
    });

相关内容填写完毕之后，提交表单会执行js中的getConfirm()方法：

 function getConfirm()
    {
        debugger;
        alert($('#example-getting-started').multipleSelect('getSelects','value'));
        var selectValue = $('#example-getting-started').multipleSelect('getSelects','value');
        console.log(selectValue);
        $("#morezeng").val(selectValue);
        $("#selectForm").submit();
    }

注意—执行这段代码：

$(‘#example-getting-started’).multipleSelect(‘getSelects’,’value’);

返回值是一个字符串数组。

getConfirm()方法是这样的，取得

<input type="hidden" name="morezeng" id="morezeng"/>

隐藏域中，
再提交到后台中去

3、后台中可以有很多取值的方法，这里介绍两种，一种直接使用request对象拿，另一种是使用struts2拿值。

3.1 request方式拿：

request对象提供以下几种，具体使用详情，请自行百度，

                 request.getParameter(arg0);
         request.getParameterMap();
         request.getParameterNames();
         request.getParameterValues(arg0);

在这里我们通过request.getParameter(arg0);取得前台表单当中的各个值，arg0指的就是前台

$('#example-getting-started').multipleSelect('getSelects','value');

[‘1’,’2’,’3’]
把它的值放到一个隐藏域中，

<input type="hidden" name="morezeng" id="morezeng"/>

再通过这个隐藏域去拿值

注意，在这里隐藏域里的实际上是字符串数组–>[‘1’,’2’,’3’]，但是通过request.getParameter(morezeng);拿到之后，request对象会把字符串数组转换成字符串“1,2,3”,我这里想说的是request对象已经为我们做了一部分工作了，非常棒哟！！！

3.2 struts2方式拿：

通过这种方式拿值的话，其实是struts2已经为我们做了一些事情了，这里，你可以在Action层里定义属性值，并且提供get set方法，这样页面的值就会由struts2设置进这些属性里面，当然需要注意的是页面的那些名字一定要和定义的属性一样哟：

        private String username;
    private String pwd;
    private String ttt;
    private String morezeng;
    private String remark;

其实这里有一个疑问，就是这次如果直接使用

1）
public class User implements Serializable{
    private String username;
    private String pwd;
    private String ttt;
    private String morezeng;
    private String remark;





2）
public class SelectAction extends ActionSupport {

    private User user;

这样的话就可以通过user拿到前台的那些值了哟，不过呢，前台写法也是有一点变化呢，应该是通过对象.属性这样方式来拿值呢，这样做，struts2才会通过user对象的set，get方法把值给设置进去呢哟！

<tr>
                <td width="10%" class="tableleft">用户名：</td>
                <td><input type="text" name="user.username" id="username"/>
                </td>
            </tr>
             <tr>
                <td width="10%" class="tableleft">密码：</td>
                <td><input type="password" name="user.pwd" id="pwd"/>
                </td>
            </tr>
            <tr>
                <td width="10%" class="tableleft">多选值测试：</td>
                <td>
                     <select id="example-getting-started" name="user.ttt" multiple="multiple">

看到没，它的名字写法是不一样了哟是：name=”user.username” 这样的形式的哟

lwh_zfj

关注

8
点赞
踩
32

收藏

觉得还不错? 一键收藏
0
评论
实现select下拉框多选

今天是我第一次写博客，开始可能写得不好，但是我相信会越来越好的，加油吧，今天就从解决一个问题开始吧。今天记录一个问题，在工作中遇到一这个问题，解决下拉框多选问题并且传值到后台的具体实现。废话不多说啦，直接开始来呗：1、页面中导入需要的js<script type="text/javascript" src="${path }/myjs/jquery.min.js"></script> <sc
复制链接

扫一扫

专栏目录