从字符串向量中的标记<select>中捕获多个值</select>

时间:2014-03-23 00:04:36

标签: jquery spring

在我的spring应用程序中,我有一个html表单,需要发送值serveride。 JSP页面中用于将值发送到服务器的代码是:

html表单

<form name="form_lista_horario">
    <select name="id_evento" id="id_evento">
        <c:forEach var="evento" items="${lista_eventos}">
          <option value="<c:out value="${evento.id}"/>"> ${evento.nome} - ${evento.descricao} </option>
        </c:forEach>
    </select>

    <table id="hor-zebra" border = 2>
    <tr>
        <td>
            <select name="lista_usuarios" id="usuarios" size="10" multiple="multiple">
                <c:forEach var="usuario" items="${lista_usuarios}">
                    <option value="${usuario.id}">${usuario.nome}</option>
                </c:forEach>
            </select>
        </td>

    <td>
        <p> <button type="button" class="btn btn-lg btn-default" id="for_left"> << </button> </p>
        <p> <button type="button" class="btn btn-lg btn-default" id="for_right"> >> </button> </p>
    </td>

        <td>
            <select name="selecao_usuarios" id="selecao" size="10" multiple="multiple">
            </select>
        </td>
    </tr>
    </table>

    <button type="button" class="btn btn-lg btn-default" id="btn_enviar">OK</button>
</form>

jQuery代码

$("#btn_enviar").click(function(){
    $.ajax({
        url: "lista_horario.html",
        data: { id_evento: $('#id_evento option:selected').val(), id_usuarios: $('#selecao option').val()  },
        cache: false
    }).done(function(data) {
        $("#result").show();
        $("#result").empty().append( data );
    });
});

此数据由我的控制器通过此方法读取:

@RequestMapping(value="/lista_horario", method=RequestMethod.GET)
@ResponseBody
public String lista_horario(@RequestParam("id_evento") String id_evento, @RequestParam("id_usuarios") String[] id_usuarios)
{
     ...
    }

我的问题是这个方法只读取了第一个值。有谁知道如何解决这个问题?

更新

好的,问题尚未完全解决。对不起,我发现没有做足够的测试。现在,当我尝试将表单提交到服务器时,浏览器的控制台显示正在发送:

**id_evento:"1"**

id_usuario[] 9
id_usuario[] 4
id_usuario[] 7
id_usuario[] 8
**_:"1395536033181"**;

仅正确发送第一个参数。

我的jquery代码现在是这样的:

$("#btn_enviar").click(function(){
    var selecao_usuario=[];
    $('#selecao option').each(function(){
        selecao_usuario.push($(this).val());
    });
    $.ajax({
        url: "lista_horario.html",
        data: { id_evento: $('#id_evento option:selected').val(), id_usuarios: selecao_usuario },
        cache: false
    }).done(function(data) {
        $("#result").show();
        $("#result").empty().append( data );
    });
});

2 个答案:

答案 0 :(得分:0)

试试这个:

<select name="id_evento" id="id_evento" multiple>
    <c:forEach var="evento" items="${lista_eventos}">
      <option value="<c:out value="${evento.id}"/>"> ${evento.nome} - ${evento.descricao} </option>
    </c:forEach>
</select>

看看它做了什么。它应该允许多选,它将用逗号分隔选定的值。

答案 1 :(得分:0)

试试这个

var id_evento_valores=[];
$('#id_evento option:selected').each(function() {
id_evento_valores.push($(this).val());
});

//..

 $.ajax({
        url: "lista_horario.html",
        data: { id_evento: id_evento_valores, id_usuarios: $('#selecao option').val()  },
        //...

或者如果您想将它作为逗号分隔列表而不是数组

var id_evento_valores=[];
    $('#id_evento option:selected').each(function() {
    id_evento_valores.push($(this).val());
    });

var id_evento_cuerda=id_evento_valores.join(",");
//..