Question

在下面的页面中，表单中的字段通过处理事件提交的jquery脚本发送到服务器。

HTML

    <c:url value="/permissao/cadastra.htm" var="cadastraGrupo"/>
    <form class="form" role="form" action="${cadastraGrupo}" method="post">
        <p> <input type="text" name="nome" class="form-control" placeholder="Nome" autofocus> </p>

        <table class="bordered">
        <tr>
            <td>
                <select id="permissoes" size="10" multiple="multiple">
                </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="permissoes" id="selecao" size="10" multiple="multiple">
                </select>
            </td>
        </tr>
        </table>

        <p> <button type="submit" class="btn btn-primary">Cadastrar</button> </p>
     </form>

  <div id="yes" class="alert alert-success" style="display: none;">
    <strong>Pronto!</strong> Permiss&atilde;o cadastrado com sucesso.
  </div>

  <div id="not" class="alert alert-danger" style="display: none;">
    <strong>Erro!</strong> N&atilde;o foi possivel cadastrar a permiss&atilde;o.
  </div>

JQuery的

$(document).on('submit', '.form', function (event) {
    // Stop form from submitting normally
    console.log("start of submission");
    event.preventDefault();

    // Get some values from elements on the page:
    var $form = $( this ),
    url = $form.attr( "action" );

    // Send the data using post
    var posting = $.post( url, $(this).serialize() );

    // Put the results in a div
    posting.done(function( data ) {
        console.log(data);
        $("#"+data).css("display", "block");

        if($("#pergunta").is("visible"))
            $("#pergunta").css("display", "none");

        $(".form").each (function(){
            this.reset();
        });
    });
});

当我通过浏览器开发者工具检查发送到服务器的内容时，我看到只显示字段'nome'，但没有显示'permissoes'。这有什么不对？

PS。：在服务器端，我的服务类中的此方法处理从客户端接收的参数。变量'permissoes'保持空值。

public boolean cadastra(HttpServletRequest request, HttpServletResponse response) {
    String nome_grupo = request.getParameter("nome");
    String[] permissoes = request.getParameterValues("permissoes[]");

    if(nome_grupo == null || permissoes == null) {
        System.out.println("nome_grupo = "+nome_grupo);
        System.out.println("permissoes = "+permissoes);
        return false;
    }

    GrupoPermissao grupo = new GrupoPermissao();
    grupo.setNome(nome_grupo);

    List<Permissao> lista = new ArrayList<Permissao>();
    for(int i=0; i<permissoes.length; i++)
        lista.add(permissao.findById(Integer.valueOf(permissoes[i]).intValue()));
    grupo.setPermissao(lista);

    return grupo_permissao.persist(grupo);
}

更新

HTML输出：这是jquery脚本添加dinamaclly选项后浏览器获取的内容：

<select id="permissoes" size="10" multiple="multiple">
                    <option value="1">cadastra_produto</option><option value="2">altera_produto</option><option value="3">remove_produto</option><option value="4">cadastra_categoria</option><option value="5">altera_categoria</option><option value="6">remove_categoria</option><option value="7">cadastra_promocao</option><option value="8">altera_promocao</option><option value="9">remove_promocao</option><option value="10">cadastra_destaque</option><option value="11">altera_destaque</option><option value="12">remove_destaque</option><option value="13">cadastra_usuario</option><option value="14">altera_usuario</option><option value="15">remove_usuario</option><option value="16">cadastra_configuracao</option><option value="17">altera_configuracao</option><option value="18">remove_configuracao</option><option value="19">cadastra_preferencia</option><option value="20">altera_preferencia</option><option value="21">remove_preferencia</option><option value="22">cadastra_perfil</option><option value="23">altera_perfil</option><option value="24">remove_perfil</option><option value="25">cadastra_materia_prima</option><option value="26">altera_materia_prima</option><option value="27">remove_materia_prima</option><option value="28">cadastra_quantidade_materia_prima</option><option value="29">altera_quantidade_materia_prima</option><option value="30">remove_quantidade_materia_prima</option><option value="31">cadastra_descricao_materia_prima</option><option value="32">altera_descricao_materia_prima</option><option value="33">remove_descricao_materia_prima</option><option value="34">cadastra_fornecedor</option><option value="35">altera_fornecedor</option><option value="36">remove_fornecedor</option><option value="37">cadastra_endereco</option><option value="38">altera_endereco</option><option value="39">remove_endereco</option><option value="40">cadastra_contato</option><option value="41">altera_contato</option><option value="42">remove_contato</option><option value="43">cadastra_unidade</option><option value="44">altera_unidade</option><option value="45">remove_unidade</option><option value="46">cadastra_permissao</option><option value="47">altera_permissao</option><option value="48">remove_permissao</option><option value="49">dashboard</option></select>

更新2

发生了什么事情我需要手动选择第二个选择的所有元素，然后将它们发送到服务器。我不希望这样，因为用户已经从第一次选择中选择并将全部转移到第二次。然后，我正在寻找一种方法，在提交表单之前从select中选择所有项目（使用jquery代码）。

Answer 1

您已定义了选择框，但它没有任何选项

<select name="permissoes" id="selecao" size="10" multiple="multiple">
</select>

此外，出于调试目的，你应该在将它发送到服务器之前检查firefox中的值/ firebug中的值/ javascript中的其他一些调试器

字段未发送到服务器

1 个答案: