hack for jQuery 序列化不在表单内的 <input> 和 <select> 元素的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15467024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hack for jQuery to serialize values of <input> and <select> elements that are NOT inside a form
提问by lizz
I've been looking through a lot of posts on stackoverflow and elsewhere for this answer, but am still struggling to find something that will work with the boundaries of my application.
我一直在查看有关 stackoverflow 和其他地方的很多帖子以获得这个答案，但我仍在努力寻找适合我的应用程序边界的东西。
I am building off of an existing plugin (http://johnny.github.com/jquery-sortable/) to create a drag-and-drop html editor for elementary students. This plugin uses jQuery to serialize output into a format that resembles HTML source code, which consequently automatically updates a web page preview window. Contenteditable spans work well for allowing users to input values without accidentally editing the html tags themselves.
我正在构建一个现有的插件 ( http://johnny.github.com/jquery-sortable/) 来为小学生创建一个拖放式 html 编辑器。该插件使用 jQuery 将输出序列化为类似于 HTML 源代码的格式，从而自动更新网页预览窗口。Contenteditable span 可以很好地允许用户输入值，而不会意外编辑 html 标签本身。
However, I cannot get the values of the input or select elements to be included in the serialized output. After looking at the jQuery API for serialize, it seems to indicate that <input> elements must be inside a form and also have a name attribute. This is not something that will work with the nature of my project, so I am seeking a hack/workaround.
但是，我无法获取要包含在序列化输出中的输入或选择元素的值。查看序列化的 jQuery API 后，似乎表明 <input> 元素必须在表单内并且还具有 name 属性。这不适合我的项目的性质，所以我正在寻找一个黑客/解决方法。
If anyone is aware of a hack to make sure that input and select element values are included in serialized output, I would greatly appreciate it!
如果有人知道确保输入和选择元素值包含在序列化输出中的技巧，我将不胜感激！
Edit: Here is a link to the most live demo-able state I could get it to: http://tinker.io/5bdab/5.After trying a few places to put my code (jsbin, tinkerbin, jsfiddle), it seems they all have issues displaying an iframe? So you can't see the awesome fact that dragging and dropping elements in the middle column ultimately results in a live html page preview being changed next to it... However, you can still see that the results in the generated source code below get changed by being serialized (the part that I need assistance in figuring out how to serialize input and select elements so that their values will show up in the textarea).
编辑：这是我可以获得的最实时演示状态的链接：http: //tinker.io/5bdab/5。在尝试了几个地方来放置我的代码（jsbin、tinkerbin、jsfiddle）之后，似乎它们在显示 iframe 时都有问题？所以你看不到中间列中的元素拖放最终导致旁边的实时 html 页面预览被更改的令人敬畏的事实......但是，你仍然可以看到下面生成的源代码中的结果通过被序列化而改变（我需要帮助弄清楚如何序列化输入和选择元素的部分，以便它们的值将显示在文本区域中）。
However, the entire file is just in the HTML section (for convenience for instances like this, not for standard practice), since I link to external js files and have an internal style defined - if you were so inclined, you could just save the html file to your computer and check it out. I am not aware of a better option for displaying a live demo with supported iframes :/
然而，整个文件只在 HTML 部分（为了方便这样的例子，而不是为了标准实践），因为我链接到外部 js 文件并定义了内部样式 - 如果你愿意，你可以保存将 html 文件发送到您的计算机并检查它。我不知道使用受支持的 iframe 显示实时演示的更好选择：/
回答by Mohammad Adil
Try wrapping all of your contents inside a div
尝试将所有内容包装在一个 div
<div id="wrapper">
<input type="text" value="text text" name="text"> <br>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<textarea name="textarea">textarea text</textarea>
</div>
and then serialize all of the elements inside this div
然后序列化这个里面的所有元素 div
$("#wrapper").find("select,textarea, input").serialize();
