使用 jquery 在选项选择的基础上添加新的表单输入字段

Posted 2023-05-08

【中文标题】使用 jquery 在选项选择的基础上添加新的表单输入字段

【英文标题】：Add new form input fields on option select basis using jquery

【发布时间】：2012-08-21 22:38:50

【问题描述】：

我有一个 html 表单，在从下拉列表中选择输入字段时，我想添加一些 html 输入字段。我正在使用append() 但它实际上只是附加到 div 假设我有 2 个选项 1,2 在选择 1 时将一些输入字段添加到表单中，但在为选项 1 选择 2 个输入字段时保持不变。我可以使用什么另一种方法来代替附加？我真的错过了一些非常基本的东西，用谷歌搜索了很多，但在这种情况下没有帮助。

jQuery('#category').change(function() 
   if( $(this).val() == 1 ) 
      // input fields to add for 1
   
   if( $(this).val() == 4 ) 
     // input fields to add for 4
   
);

【问题讨论】：

我不太明白这个问题。如果您谈到的 DIV 不是正确的，请选择正确的父元素。

【参考方案1】：

为什么不在表单中创建所有输入字段并执行以下操作：

$(document).ready(function()

    $("#inputfield1").hide();
    $("#inputfield2").hide();
);

jQuery('#category').change(function() 
   if( $(this).val() == 1 ) 
      $("#inputfield1").show();
      $("#inputfield2").hide();
   
   if( $(this).val() == 4 ) 
      $("#inputfield2").show();
      $("#inputfield1").hide();
   
);

【参考方案2】：

在相同位置添加输入字段。并设置其 css display:none; 并在下拉更改值时将属性更改为 display:block;。