非 ajax POST 无法包含由 ajax 填充的选择选项答案

【问题标题】：Non-ajax POST fails to include select options populated by ajax非 ajax POST 无法包含由 ajax 填充的选择选项
【发布时间】：2015-07-15 08:54:01
【问题描述】：

我有一个普通表单，其中有一个隐藏输入在页面加载时固定，另一个隐藏输入是动态的，以及两个动态选择框，其设计复制自http://www.designchemical.com/blog/index.php/jquery/change-order-multiple-select-lists-using-jquery/：

<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="/favicon.ico" type="image/x-icon" rel="icon"/><link href="/favicon.ico" type="image/x-icon" rel="shortcut icon"/>
<link rel="stylesheet" href="/css/itnrs.css"/>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/><link rel="stylesheet" href="http://example.com/css/jquery-picklist.css"/>    <script src="http://code.jquery.com/jquery.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script><script src="http://example.com/js/jquery-picklist.min.js"></script><script>
//<![CDATA[
$(document).ready(function() {
$('#btn-add').click(function(){
    $('#select-from option:selected').each( function() {
            $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        $(this).remove();
    });
});
$('#btn-remove').click(function(){
    $('#select-to option:selected').each( function() {
        $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        $(this).remove();
    });
});
$('#btn-up').bind('click', function() {
    $('#select-to option:selected').each( function() {
        var newPos = $('#select-to option').index(this) - 1;
        if (newPos > -1) {
            $('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
            $(this).remove();
        }
    });
});
$('#btn-down').bind('click', function() {
    var countOptions = $('#select-to option').size();
    $('#select-to option:selected').each( function() {
        var newPos = $('#select-to option').index(this) + 1;
        if (newPos < countOptions) {
            $('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
            $(this).remove();
        }
    });
});
$('#pending').change(function() {
    $.ajax({
        url: 'recommend/'+$(this).val(),
        success:function(data,textStatus) {
            $("#students").html(data);
        }
    });
});
});

//]]></script></head>
<body>
    <div class="inner_content">
        <select id="pending">
<option value='2978'>511-150602_M   S511 - Const... (4)</option>
<option value='3063'>031_M1 S031-Basic O... (4)</option>
</select>
<form method="post" accept-charset="utf-8" id="form1" action="/url">
<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>
<table>
<tr id="students">
<td>
<select id="select-from" multiple="multiple" style="clear:none" size='5'>
<option value="0">Not recommended</option>
</select>
</td>
<td>
<select id="select-to" name='UserId[]' multiple="multiple" style="clear:none" size='5'>
<option value="0">Recommended</option>
</select>
<input type="hidden" name="CourseId" value='0'/>
</td></tr><tr>
<td colspan="2">
<input type="button" id="btn-add" value="Add"/>
<input type="button" id="btn-remove" value="Remove"/>
<input type="button" id="btn-up" value="Up"/>
<input type="button" id="btn-down" value="Down"/>
</td></tr>
</table>
<button type="submit">Submit</button>    </form>        </div>
</div>
</body>
</html>

选择框和选择框的内容是页面加载时的占位符。我从#pending 选择框中选择了一个选项，更改事件正确地发送了一个ajax 请求来更新select-from 选项。我通过#btn-add 添加了选项，并将选项移至#select-to。 Chrome/Firefox 开发者控制台还显示 CourseId 隐藏输入和选择选项在 DOM 中更新。当我单击提交按钮时，使用 Chrome，生成的 POST 请求仅包含隐藏的输入（_method）。 Firefox 更好：尽管我选择了两个选项并且 select-to 的名称为 UserId[] 并设置为多个，但我选择了一个选项。

这里有什么问题？

【问题讨论】：

也许你可以在jsfiddle.net 上设置一个演示，并更详细地描述什么不起作用。对我来说，这仍然有点不清楚。

标签： jquery ajax

【解决方案1】：

我忘记在提交表单之前选择选择框中的所有选项。我通过将以下处理程序添加到 $(document).ready 解决了这个问题：

$('#form').submit(function() {
    $('#select-to option').prop('selected', true);
});

【讨论】：