为什么当我触发 JS 时，这个选择会添加额外的空选项？答案

【问题标题】：Why does this select adds additional empty option when I trigger JS?为什么当我触发 JS 时，这个选择会添加额外的空选项？
【发布时间】：2014-11-05 12:53:15
【问题描述】：

我有一个非常简单的表格，里面有少量的 jQuery。如果我在选择字段中选择特定选项，我想要做的是显示文本输入。在该输入中，我希望能够向我的选择字段添加新选项。除非我尝试多次使用它，否则它工作正常。第一次没问题。在第二次，它向我添加了带有空值和标签的附加选项字段。在第 3 次，它添加了两个空选项字段。等等……

我正试图弄清楚为什么会发生这种情况。这是代码预览和演示： http://jsfiddle.net/rx5orekb/ HTML：

<form action="#" class="source">
    <select id="source">
        <option value="none">None</option>
        <option value="source-xyz">Source XYZ</option>
        <option value="something-else">Something Else</option>
        <option value="add-new">Add New Source</option>
    </select>
    <input type="text" placeholder="Type name and hit enter" value="" style="display: none" />
</form>

JS：

var Form = {
    addNewSource: function(form, select, newSource) {
        select.hide();
        newSource.show().focus();

        form.on('submit', function(event) {
            event.preventDefault();
            var label = newSource.val(),
                html = '<option value="'+label+'">'+label+'</option>';

            select.show().find('option[value=add-new]').before(html);
            select.val(label);
            newSource.hide().val('');
        });
        return false;
    },

    sourceAppendix: function() {
        var select = $('.source').find('select');

        select.on('change', function() {
            var v = $(this).val(),
                form = $(this).parents('.source'),
                newSource = form.find('input');

            if(v == 'add-new') {
                Form.addNewSource(form, $(this), newSource);
            }
        });
    }
}

$(document).ready(function() {
    Form.sourceAppendix();
});

非常感谢！

【问题讨论】：

您正在堆叠多个提交事件。每次您拨打addNewSource 时，您都会添加一个新的
@Johan 这是真的，我没有意识到：/

标签： javascript jquery forms

【解决方案1】：

每次调用addNewSource() 时，都会绑定另一个submit 处理程序。因此，如果您调用addNewSource 4 次，单击提交按钮将运行提交处理程序4 次。而且每一个都会为选择添加另一个选项。

我不太确定在将新选项添加到菜单之前等待提交事件来完成什么，所以我不确定如何更正代码。您可能只想立即添加新选项：

addNewSource: function(form, select, newSource) {
    select.hide();
    newSource.show().focus();
    var label = newSource.val(),
        html = '<option value="'+label+'">'+label+'</option>';
        select.find('option[value=add-new]').before(html);
},

.submit() 处理程序应该绑定在顶层，而不是在 addNewSource 内部。

【讨论】：

【解决方案2】：

见http://jsfiddle.net/rx5orekb/1/

发生这种情况是因为每次在您绑定到表单提交的 select 上有一个新的更改事件。第一次单击“添加新”时，您将绑定到表单提交，第二次选择“添加新”时，您将绑定到表单提交第二次，依此类推。

使用

 form.unbind('submit');

取消绑定表单上的提交。

【讨论】：

这正是我所需要的，解绑功能！谢谢。