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

Question

在我的spring应用程序中，我有一个html表单，它需要发送值服务器端。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 );
    });
});

Answer 1

try this

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(",");
//..

Answer 2

试试这个:

<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>

看看它是做什么的。它应该允许多重选择，将选择的值用逗号分隔。