Javascript和动态表单创建

Javascript and dynamically form creation

本文关键字：创建 表单 动态 Javascript      更新时间：2023-09-26

我有一个注册表单，我想当用户从第一次选择中选择一个项目时，动态地创建与数据库中与第一次选择兼容的项目的第二次选择。例如，我有2个选择列表，第一个是课程，第二个是教授。当我从第一个选择课程中选择时，第二个选择列表必须只有该课程的教授。我正在使用jsp,java和我想避免ajax，这是可能的吗?谢谢你！

这是可能的。

但是如果没有AJAX，您将不得不加载页面中的所有数据。这意味着将与每节课相关的教授列表存储在Javascript数组或隐藏的HTML元素中，您可以稍后从中检索数据。

您可以使用以下解决方案之一来避免ajax:

  1. 在显示表单时加载所有课程的所有教授，并将它们存储在某个JavaScript结构中。当课程选择发生变化时，从这个JavaScript结构中获取相关的教授。这可能意味着一次加载太多的数据，尽管
  2. 当课程选择更改时，提交表单并重新显示它，并填充教授的选择框。

这两个解决方案都需要JavaScript，但我真的不知道不使用AJAX会有什么好处。使用第二种解决方案可以完全避免使用JavaSCript，但是用户必须单击提交按钮才能加载第二个表单。

这是可能的，

创建包含教授和课程列表的两个选择框，并在默认情况下隐藏它们。因此，在第一个选择框上附加事件"onchange"，当教授被选中时，显示包含教授的列表，当课程被选中时，显示包含课程的列表，并隐藏教授。例如

<select id="cbOne" onchange="show(this);">
<option value="0">Select</option>
<option value="1">Professors</option>
<option value="2">Lessons</option>
</select>
<select id="cbLessons" style="display: none;">
... your list
</select>
<select id="cbProfessors" style="display: none;">
... your list
</select>

这是JavaScript显示

的方法
<script language="javascript">
    function show(el)
    {
      var professors = document.getElementById('cbProfessors');
      var lesssons = document.getElementById('cbLessons');
       if(el.value == "0")
       {
         professors.style.display = 'none';
         lessons.style.display = 'none';
    }
       else if(el.value == "1")
       {
         professors.style.display = '';
         lessons.style.display = 'none';
       }
       else if(el.value == "2")
       {
         professors.style.display = 'none';
         lessons.style.display = '';
       }
    }
</script>
相关文章：