javascript - 是否存在一个插件，可以在下拉菜单中创建 "Other"选项，并在选择“其他”时创建用于替代输入的文本框？

Question

我有一个多页表单，其中有许多下拉选择框。大多数这些框需要有一个“其他”字段，然后需要一种输入不属于所选值之一的内容的方法。提交表单时，如果选择“其他”，则“其他”内容应代替下拉菜单保存到数据库中。

是否有已经编写的插件或脚本可以轻松地为我完成此操作？我的很多字段都是动态创建的，并且必须稍后进行编辑(使用嵌套表单 jquery 插件)，因此编写适用于所有字段的代码(无需为每个字段编写特定函数)对我来说很困难。

如果我找不到合适的插件，我可能会使用Dojo dijit Combobox ，虽然这完全满足了我的要求，但对于我的用户来说，理想的选择是一个在下拉列表中具有“其他”选项的选择框插件，当选择“其他”时，会出现一个文本框供用户填写出去。编辑字段时，还需要根据数据库中存储的值适当填充下拉列表或文本框。是否存在这样的东西，无论是在 javascript/jquery/prototype/other 中，还是在 Rails 3 插件或 gem 中？非常感谢!

编辑:我很可能会使用 FlexBox如果我找不到带有单独文本区域的内容 - 但我仍在寻找单独文本区域的解决方案!

Answer 1

我整理了一个小脚本，可以满足您的需求:http://jsfiddle.net/nHh3C/肯定还有待改进，但我想你已经明白了。实际上我自己可能会使用这个:D

这是 JS:

$('select').each(function(i, select){
    if (!$(select).data('name')) {
        $(select).data('name', $(select).attr('name'));
    } 
    $(select).change(function(){
        if ($(this).val() == 'other') {
            $('<input/>', {
                'name' : $(this).attr('name')
            }).insertAfter($(this)); 
            $(this).attr('name', '');
        } else {
            $('input[name='+$(this).data('name')+']').remove();
            $(this).attr('name', $(this).data('name'));
        }
    });
});

编辑啊，如果这还不清楚——它使用 jQuery。只需将 select 选择器更改为您需要的内容即可。将其包装在插件中也不难。

编辑2使用 Rails，您应该能够执行类似的操作(在助手中可能更好)来生成选择:

select("post", "person_id", Person.all.collect {|p| [ p.name, p.id ] } << ['Other', 'other'])

对于编辑 View ，您可以只检查该值是否包含在选择值中，如果不包含，则打印附加输入字段并将选择设置为预选“其他”选项。并且你应该处理 JS 以匹配情况。