javascript - jquery .serialize() 不包含序列化字符串中的选择列表选定值

Question

我想使用 jquery .serialize() 序列化我的 div 部分。我知道我们只能用这个函数序列化表单。因此，为此我创建了我的 div 部分的克隆并将其附加到新创建的表单元素中，然后序列化。其他输入字段正在序列化，但选择列表值未序列化(所选值不在序列化字符串中)。我创建了一个 JSFIDDLE:

http://jsfiddle.net/mj6Eg/1/

HTML

<div id="serializethis">
<label>Quantity</label>
<select id="quantity" name="Quantity" size="1">
  <option value="1">1</option>
  <option value="5">5</option>
  <option value="25">25</option>
  <option value="50">50</option>
</select>
</div>

<button id="serialize">Serialize</button>​

JS

$("#serialize").click(function(){

    var clone = $("#serializethis").clone();
    var form = $("<form />").append(clone);

    alert(form.serialize());

});​

我错过了什么？

Answer 1

当 clone() -ing 一个元素，其选择的值丢失。所以你的代码将不起作用。最简单的解决方案是保留 <form>始终围绕元素(除非您使用无论如何都需要的 HTML5)。

另一种解决方案是将您的元素临时包装在一个表单中:

$("#serialize").click(function() {
    var data = $("#serializethis").wrap('<form>').parent().serialize();
    alert(data);
    $("#serializethis").unwrap('form');
});