Question

我正在尝试实现一个注册页面，其中字段可以根据用户类型而不同。

这是我的JSP页面

<html>
<head>
<script type="text/javascript">

$(document).ready(function() {
 $(".Alumni").hide();

$('#selectType').change(function () {

var val = $(this).val();
if (val == "ALUMNI") {
     $('.Alumni').show();
    }
});
});
</script>
<style>
.error {
 color: #ff0000;
 }

.errorblock {
 color: #000;
  background-color: #ffEEEE;
  border: 3px solid #ff0000;
 padding: 8px;
  margin: 16px;
 }
</style>
</head>
  <body>
   <h2>Registration </h2>

<form:form method="POST" action="register" modelAttribute ="user">
       <form:errors path="*" cssClass="errorblock" element="div" />
    <table>
           <tr>
              <td>First Name :</td>
            <td><form:input path="fName" />
            </td>
            <td><form:errors path="fName" cssClass="error" />
             </td>
        </tr>
            <tr>
            <td>Last Name :</td>
            <td><form:input path="lName" />
            </td>
            <td><form:errors path="lName" cssClass="error" />
             </td>
         </tr>
             <tr>
            <td>Middle Name :</td>
            <td><form:input path="mName" />
            </td>
            <td><form:errors path="mName" cssClass="error" />
            </td>
        </tr>
        <tr>
            <td>User Name :</td>
            <td><form:input path="username" />
            </td>
            <td><form:errors path="username" cssClass="error" />
            </td>
        </tr>
        <tr>
            <td>Password :</td>
            <td><form:input path="password" type="password"/>
            </td>
            <td><form:errors path="password" cssClass="error" />
            </td>
        </tr>
        <tr>
            <td>Password Confirmation:</td>
            <td><form:input path="confPassword"  type="password" />
            </td>
            <td><form:errors path="confPassword" cssClass="error" />
            </td>
        </tr>
        <tr>
            <td>Email Address:</td>
            <td><form:input path="email" />
            </td>
            <td><form:errors path="email" cssClass="error" />
            </td>
        </tr>
        <tr>
            <td>Type :</td>
            <td><form:checkboxes id="selectType" items="${typeList}"
                path="type" /></td>
            <td><form:errors path="type" cssClass="error" />
            </td>
        </tr>
        <tr>
        </tr>
        <tr>        
            <td>Address :</td>
        </tr>
        <tr>        
            <td>Country :</td>
            <td><form:input path="country" />
            </td>
            <td><form:errors path="country" cssClass="error" />
            </td>
        </tr>
        <tr>
            <td>State :</td>
            <td><form:input path="state" />
            </td>
            <td><form:errors path="state" cssClass="error" />
            </td>
        </tr>
        <tr>
            <td>City :</td>
            <td><form:input path="city" />
            </td>
            <td><form:errors path="city" cssClass="error" />
            </td>
        </tr>
        <tr>
            <td>Street :</td>
            <td><form:input path="street" />
            </td>
            <td><form:errors path="street" cssClass="error" />
            </td>
        </tr>


        <tr class="Alumni">
            <td >Year of Graduation :</td>
            <td><form:input path="yOfGrad" />
            </td>
            <td><form:errors path="yOfGrad" cssClass="error" />
            </td>
        </tr>
    <tr>
            <td colspan="3"><input type="submit" value="Submit Registration Request" /></td>
        </tr>
    </table>
</form:form>

我已经四处寻找一些例子但不幸的是我无法完成我想做的事情。谁能告诉我我做错了什么？

感谢您的帮助。

Answer 1

在页面中加载你的jQuery插件

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

demo

根据JSP中的复选框值隐藏/显示表行

1 个答案: