加载关于选择框内容的字段答案

【问题标题】：Loading fields with respect to select box content加载关于选择框内容的字段
【发布时间】：2013-07-28 18:46:46
【问题描述】：

我有一个 JSP 页面，其中我使用 Struts2 标记来制作我的注册表单。现在第一个字段是使用s:select 标签的类型。现在，根据用户选择的内容，我想在选择框下方的同一页面上加载下一个 texfields。我该怎么做？这是我的方法，但它不起作用。

<s:form action="clientAction" method="post">
  <s:select name="type" label="Registration Type" 
    list="{'Student','Faculty'}" emptyOption="false" />
  <s:if test="type.equals(Student)">        
    <s:textfield label="FirstName" name="s_fname"/>
    <s:textfield label="LastName" name="s_lname"/>
    <s:textfield label="UserName" name="s_username"/>
    <s:password label="Password" name="s_password"/>
    <s:textfield label="EmailId" name="s_email_id"/>
  </s:if>       
  <s:if test="type.equals(Faculty)">
    <s:textfield label="FirstName" name="fac_fname"/>
    <s:textfield label="LastName" name="fac_lname"/>
    <s:textfield label="UserName" name="fac_username"/>
    <s:password label="Password" name="fac_password"/>
    <s:textfield label="EmailId" name="fac_email"/>
    <s:textfield label="Course Name" name="course_name"/>
    <s:textfield label="Course Id" name="course_id"/>
  </s:if>
  <s:submit/>
</s:form>

【问题讨论】：

标签： java jquery jsp struts2 jsp-tags

【解决方案1】：

您可以使用 JQuery 来做到这一点，并且您不需要从服务器加载字段，也不需要将 JavaScript 代码与 JSP 代码混淆。您应该使用css_xhtml 主题来隐藏/显示选择框更改事件的字段。就像在这个例子中

<s:form action="clientAction" method="post" theme="css_xhtml">
    <s:select id="RegistrationType" name="type" label="Registration Type"
              list="{'Student', 'Faculty'}" emptyOption="false" />
  <s:div id="Student" cssStyle="display: none;">
    <s:textfield label="FirstName" name="s_fname"/>
    <s:textfield label="LastName" name="s_lname"/>
    <s:textfield label="UserName" name="s_username"/>
    <s:password label="Password" name="s_password"/>
    <s:textfield label="EmailId" name="s_email_id"/>
    <s:submit/>
  </s:div>

  <s:div id="Faculty" cssStyle="display: none;" >
    <s:textfield label="FirstName" name="fac_fname"/>
    <s:textfield label="LastName" name="fac_lname"/>
    <s:textfield label="UserName" name="fac_username"/>
    <s:password label="Password" name="fac_password"/>
    <s:textfield label="EmailId" name="fac_email"/>
    <s:textfield label="Course Name" name="course_name"/>
    <s:textfield label="Course Id" name="course_id"/>
    <s:submit/>
  </s:div>
</s:form>
<script type="text/javascript">
  $(document).ready(function(){
    $('#RegistrationType').change(function(){
      $('#'+this.value).css('display', 'block');
      if (this.value=='Student') $('#Faculty').css('display', 'none');
      else $('#Student').css('display', 'none');
    });
  });
</script>

【讨论】：

【解决方案2】：

您可以在 s:select 标记上使用 Javascript 的 onSelect 事件来加载表单中的下一个字段，具体取决于“注册类型”的选择。

<s:select onselect="loadForm();" name="type" label="Registration Type" list="{'Student','Faculty'}" emptyOption="false" />

【讨论】：