确定字段（在提交事件上）是下拉列表还是输入答案

【问题标题】：Determine if field (on submit event) is a dropdown or a input确定字段（在提交事件上）是下拉列表还是输入
【发布时间】：2015-06-02 19:07:48
【问题描述】：

我的问题是在我的名为提交的按钮上；单击提交按钮后，我想将数据从视图中保存到我的模型中。我想将每个字段输入存储到一个对象中，以便可以将数据存储在我的模型中。问题是我想确定它是下拉菜单还是输入，因为这就是我检索值的方式。但是，如果有更好的方法，我会全力以赴。也许我不需要知道它是文本输入还是下拉菜单的区别。

这是我正在弄乱的代码：

submit: function(e) {
    var field = $(e.currentTarget);

},

selectionChanged: function(e) {
    var field = $(e.currentTarget);
    var value = $("option:selected", field).val();
    var data = {};
    data[field.attr('similarID')] = value;
    this.model.set(data);
},

fieldChanged: function(e) {
    var field = $(e.currentTarget);
    var data = {};
    data[field.attr('similarID')] = field.val();
    this.model.set(data);
},

//update values in model from form
update: function(e) {
    var val = $(this.ui.ageAnnuitization).val();
    this.model.set({'ageAnnuitization': val});
}

如您所见，我有一个 fieldChanged 和一个 selectionChnaged；但我不需要这两个。我想把它瘦下来，让提交做这一切。将数据存储到模型中并将数据设置到模型中。

我的下一个问题与查找每个字段名称有关。如果我有：

名字姓年龄状态

什么是做我正在做的事情的简单方法：

data[field.attr('similarID')] = field.val();

而不是对所有人使用相似的ID；如何使用特定于每个字段的类名而不用 4 行代码做同样的事情？

谢谢

【问题讨论】：

标签： javascript jquery forms backbone.js model-view-controller

【解决方案1】：

您可以使用 jQuery 的serializeArray 来收集表单提交时的所有数据。 serializeArray 将返回表单中所有字段的名称和值对的数组，您可以简单地遍历这些数组值并创建所需的对象，然后将其设置为您的模型。它适用于所有类型的输入类型文本、密码、选择等。

serializeArray docs

请参阅下面的示例。

$(function () {

    $('#myForm').on('submit', function (e) {
        e.preventDefault();
        var $this = $(this);
        var serializedArray = $this.serializeArray() || [];

        var modelObject = {};
        serializedArray.forEach(function(obj){
            modelObject[obj.name] = obj.value;
        });
        
        console.log(modelObject);
        // Now you can use `modelObject` object to set the model.
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm">
    First Name:
    <input name="fname" />
    <br/>
    Last Name:
    <input name="lname" />
    <br/>
    Select Box:
    <select name="sbox">
        <option value="opt1">Options 1</option>
        <option value="opt2">Options 2</option>
    </select>
    <br/>
    <button type="submit">Submit Form</button>
</form>

JsFiddle Demo

【讨论】：