根据使用 Javascript 选择的组合框动态添加表单字段

Posted 2023-02-24

【中文标题】根据使用 Javascript 选择的组合框动态添加表单字段

【英文标题】：Adding dynamically form fields depending on selection of combo box with Javascript

【发布时间】：2012-03-02 18:59:54

【问题描述】：

我要为一个网站做一个信息提交页面，其中会有一些字段应该在选择组合框值后的值上生成。

如果我们从组合框中的值中选择“2”，应该会生成两个个人详细信息字段。稍后我必须在 php 的帮助下将这些值插入 DB。

我也必须对这些生成的字段进行验证。

有很多领域我必须使用类似的东西。但我必须从它开始。

请帮助我或给我一些链接，我可以在此获得一些帮助。

谢谢。

【参考方案1】：

首先，我建议您学习使用 JQuery（javascript 库）。

http://api.jquery.com/

http://docs.jquery.com/Plugins/Validation

http://docs.jquery.com/UI/Autocomplete

我已经完成了一些与您使用 jquery UI 自动完成、克隆、重新定位和验证功能描述的内容非常相似的事情，而且这一切都相对简单。本质上，您要做的是在表单上使用 jquery validate（一个 jquery 插件），为您的组合框添加一个带有 onchange 的 jquery UI 自动完成功能，并隐藏您可能想要包含的所有详细信息字段表格之外的 div。当组合框发生变化时，它会调用一个函数，根据需要销毁字段，然后从表单外部克隆空白字段，填充它们（如果需要）并将它们插入到表单内的适当位置。验证器在类属性上运行，因此只需确保新字段具有正确的类就足以将它们包含在验证中。 Jquery 及其插件几乎可以在标准 javascript 所做的任何地方运行，因此集成起来应该不会那么难。当你弄清楚如何做事情时，有一点启动时间，但听起来你无论如何都会有相当多的时间，而且从中长期来看，这会让事情变得容易得多.

【参考方案2】：

我假设您的组合将用“.valueCount”标识，并且默认金额元素是一个，可以在“.field”下找到。它的通用容器由“fieldgroup”标识

您的第一个字段的名称必须设置为 dynamicfield[] 之类的名称。将“动态字段”替换为您想要的任何内容。

然后使用 jQuery 为您的第一个字段创建原型：

var $prototype = $(".field").clone();

请注意，.field 可以是字段本身的一般包装器。

现在为您的组合创建一个事件处理程序：

$(".valueCount").change(function()
   var count = $(this).val(), $fields = $(this).closest("fieldgroup").find(".field");


   if ($fields.size() > count)
       //remove fields
       $fields.slice(count).remove();
   else if ($fields.size() < count) 
       //add fields

       for (var i = count - $fields.size() ; i ; i--)
            $prototype.clone().insertAfter($fields.last());
              

);

在服务器端，您将拥有单个数组中的所有值 $_REQUEST['dynamicfield'];

做任何你喜欢的验证。