无法在具有 jquery 的表单中获取 select 字段的值

Question

我想在提交按钮上获取表单中所有元素的值。我序列化了表单中的数据，但出于某些我不理解序列化数据的原因，select 字段上的 selected 选项的值未包含在此处。

我的表单如下所示：

<form id='foo'>
      <p>
        <label>Message</label>
        <textarea id='message' name='message' rows='5'></textarea>
      </p>
      <br/>
      <p>
           <label>Name</label>
           <select id = "name">
             <option value = "1">one</option>
             <option value = "2">two</option>
             <option value = "3">three</option>
             <option value = "4">four</option>
           </select>
        </p><br/>
        <div id='success'></div>
        <button type='submit'>Send</button>
    </form>

    <p id="showdata">

    </p>

在提交此表单时，我使用一些 jquery 代码来处理它。看起来像这样：

// Bind to the submit event of our form
$("#foo").submit(function(event){

    // Abort any pending request
    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);

    // Let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");

    // Serialize the data in the form
    var serializedData = $form.serialize();
    $('#showdata').html(serializedData);

});

有人可以帮助我了解我的问题出在哪里吗！提前谢谢你。

Answer 1

如果您在 select 元素中使用 $form.serialize() 您应该在其中添加属性名称，因为 $form.serialize() 将从属性名称

中获取值

更新

https://jsfiddle.net/drhe1L9u/

将属性 name 添加到 select 元素

Answer 2

表单对名称起作用，对 ID 属性不起作用。给你 select 元素一个名称值，它将起作用。

Answer 3

您的代码似乎是正确的，但您有一个错误。看看 select ，它没有属性 name。因此，$form.serialize() 将不适用于此元素。

这是通过将属性名称添加到 select

来解决的

<form id='foo'>
  <p>
    <label>Message</label>
    <textarea id='message' name='message' rows='5'></textarea>
  </p>
  <br/>
  <p>
       <label>Name</label>
       <select name="test">
         <option value="1">one</option>
         <option value="2">two</option>
         <option value="3">three</option>
         <option value="4">four</option>
       </select>
    </p><br/>
    <div id='success'></div>
    <button type='submit'>Send</button>
</form>

<p id="showdata">

</p>

更多信息：Form Serialize

无法在具有 jquery 的表单中获取 select 字段的值

Can't get value of select field in a form with jquery

html

javascript

forms

jquery

jquery-selectbox