不能使用$.ajax将下拉列表选择的值张贴到服务器

Question

这是我第一次使用JQuery (jQuery3.0.min.js)和Javascript进行开发。

我正在创建一个简单的web表单，通过Web连接到数据库。

该表单包括一些输入文本标记和两个选择标记。我使用$.ajax方法发布表单数据。

当我提交表单时，文本框中的值将正确地张贴到服务器上，但是所选的值总是结果为null。下面是HTML代码的一部分：

<form name="modulo" id="modulo">
                ....
                <div class="field">
                    <label id="mailLbl" for="mail">Mail:</label>
                    <input id="mail" type="text" name="mail" required="required" />
                </div>

                <div class="field">
                    <label id="CDselectLBL" for="CDselect">Centro di Costo</label>
                    <select id="CDselect" class="DropDownList" name="CDselect"></select>

                </div>
                <div class="field">
                    <label id="FINALITAselectLBL" for="FINALITAselect">Finalità</label>
                    <select id="FINALITAselect" class="DropDownList" name="FINALITAselect"></select>
                </div>

                <div class="field">
                    <label id="rif_studio_cliLbl" for="rif_studio_cli">Riferimento Studio Clinico:</label>
                    <input id="rif_studio_cli" type="text" name="rif_studio_cli" />
                </div> </form>

。。下面是$.Ajax调用：

$('#modulo').submit(function (event) {
        event.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'api/richiestes', // the local url where I want to POST
            contentType: 'application/x-www-form-urlencoded; charset=utf-8',
            data: $('#modulo').serialize(),
        })
          // using the done promise callback
          .done(function (data) {
              console.log(data);

                           });
    });

以下是表单数据(从Chrome DevTools复制)：

邮件: tom.cat@google.com CDselect:10A0003 - GESTIONE FINANZIARIA FINALITAselect: clinico approvato da Comitato Etico工作室 rif_studio_cli:sfvsdfv

以下是发送请求数据的预览(也是从Chrome DevTools复制的)：

邮件："tom.cat@google.com“ CDC :空 finalità: null rif_studio_cli："sfvsdfv“

你能帮我理解我的代码出了什么问题吗？

提前感谢您的时间和善意

Answer 1

这是因为在select控件中没有任何选项元素。您需要添加该选项，然后选择一个。例如：

我已经为你创建了一个柱塞代码。

https://plnkr.co/edit/L5SyOdU8hnEKdrKitmcL?p=preview

$(document).ready(function(){
$('form').submit(function (event) {
    event.preventDefault();
    console.log($('#modulo').serialize());
});
});    

html是由您提供的上述评论，但我已经删除输入框，以简化页面。

希望它能帮到你。