javascript - Jquery更改功能在html表单中不起作用

Question

<script>
$(document).ready(function(){             
$("#agegrade").change(function () {                   
var str = "";                   
$("select option:selected").each(function () {               
str = $(this).text();               
if(str == "1900-1903")                  
str = "NAME TO BE PROVIDED";               
else if(str == "1904-1907")                  
str = "NAME TO BE PROVIDED";               
else if(str == "1908-1911")                  
str = "NAME TO BE PROVIDED";               
else if(str == "1912-1915")                  
str = "NAME TO BE PROVIDED";               
else if(str == "1916-1919")                  
str = "EGBE NA UGO";
else if(str == "1920-1923")                  
str = "NAME TO BE PROVIDED";               
else if(str == "1924-1927")                  
str = "IGWEBUIKE";               
else if(str == "1928-1931")                  
str = "ANYILIGWE";
else if(str == "1932-1935")                  
str = "NAME TO BE PROVIDED";               
else if(str == "1936-1939")                  
str = "NAME TO BE PROVIDED";               
else if(str == "1940-1943")                  
str = "UCHE BU UKO";
else if(str == "1944-1947")                  
str = "NAME TO BE PROVIDED";               
else if(str == "1948-1951")                  
str = "OFU OBI";               
else if(str == "1952-1955")                  
str = "ANULIKA";
else if(str == "1956-1959")                  
str = "IFUNANYA";               
else if(str == "1960-1963")                  
str = "NWANNEKA";               
else if(str == "1964-1967")                  
str = "NAME TO BE PROVIDED";
else if(str == "1968-1971")                  
str = "YET TO BE GROUPED";               
else if(str == "1972-1975")                  
str = "YET TO BE GROUPED";               
else if(str == "1976-1979")                  
str = "YET TO BE GROUPED";
else if(str == "1980-1983")                  
str = "YET TO BE GROUPED";               
else if(str == "1984-1987")                  
str = "YET TO BE GROUPED";               
else if(str == "1988-1991")                  
str = "YET TO BE GROUPED";
else if(str == "1992-1995")                  
str = "YET TO BE GROUPED";               
else if(str == "1996-1999")                  
str = "YET TO BE GROUPED";
else if(str == "2000-2003")                  
str = "YET TO BE GROUPED";                              
else
str = "Please Select An Item";
                       });                   
$("#adiv").text(str);
 })                 
 .change();         
 });
 </script> 
<select id="agegrade" name="agegrade" multiple="multiple">          
<option  selected="selected">1900-1903</option>
<option>1904-1907</option>
<option>1908-1911</option>
<option>1912-1915</option>
<option>1916-1919</option>
<option>1920-1923</option>
<option>1924-1927</option>
<option>1928-1931</option>
<option>1932-1935</option>
<option>1936-1939</option>
<option>1940-1943</option>
<option>1944-1947</option>
<option>1948-1951</option>
<option>1952-1955</option>
<option>1956-1959</option>
<option>1960-1963</option>
<option>1964-1967</option>
<option>1968-1971</option>
<option>1972-1975</option>
<option>1976-1979</option>
<option>1980-1983</option>
<option>1984-1987</option>
<option>1988-1991</option>
<option>1992-1995</option>
<option>1996-1999</option>
<option>2000-2003</option>
</select>
<div id="adiv"></div>

上面的代码有效，但是当我尝试将它包含在我想要应用它的表单（注册表单）中时，它不起作用。可能是什么原因？请帮我解决这个问题。下面是代码。此外，日期功能不起作用。

<table width="815" height="1000" border="0" cellpadding="0" cellspacing="0">
<tr align="left">
    <form action="<?php echo $editFormAction; ?>" id="form1" name="form1" method="POST">
<tr>
<td align="left"><strong>Registration Page</strong></td>
<td align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
<td align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
<td align="left"><strong>Title: </strong></td>
<td align="left" valign="middle"><select name="title" id="title">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
<option value="Barr.">Barr.</option>
<option value="Engr">Engr</option>
<option value="Justice">Justice</option>
<option value="Evang">Evang</option>
<option value="Arch">Arch</option>
<option value="Chief">Chief</option>
<option value="Hon">Hon</option>
</select></td>
</tr>
<td align="left" valign="middle"><span id="spryselect1">
<label for="title"></label>
<span class="selectRequiredMsg">Please select an item.</span></span></td>
<tr align="left"></tr>
<tr>
<td width="167" align="left"><strong>Surname:</strong></td>
<td width="648" align="left" valign="middle"><span id="sprytextfield1">
<label for="surname"></label>
<input name="surname" type="text" id="surname" size="51" maxlength="40" />
<span class="textfieldRequiredMsg">Your surname is required.</span></span></td>
</tr>
<tr>
<td align="left"><strong>Other Names:</strong></td>
<td align="left" valign="middle"><label for="othernames"></label>
<input name="othernames" type="text" id="othernames" size="51" maxlength="40" /></td>
</tr>
<tr>
<td align="left"><strong>Date Of Birth:</strong></td>
<td align="left" valign="middle"><label for="dob"></label>
<span id="sprytextfield9">
<label for="dateofbirth"></label>
<input type="text" name="dateofbirth" id="dateofbirth" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span> (format dd/mm/yyyy)                    <tr>
<td align="left"><strong>Father's Name:</strong></td>
<td align="left" valign="middle"><span id="sprytextfield6">
<label for="fathersname"></label>
<input name="fathersname" type="text" id="fathersname" size="51" maxlength="40" />
<span class="textfieldRequiredMsg">Your father's name is required.</span></span></td>
<tr>
<tr>
<td align="left"><strong>Mother's Name:</strong></td>
<td align="left" valign="middle"><span id="sprytextfield7">
<label for="mothersname"></label>
<input name="mothersname" type="text" id="mothersname" size="51" maxlength="40" />
<span class="textfieldRequiredMsg">Your mother's name  is required.</span></span></td>
</tr>
<tr>
<td align="left"><strong>Ward:      </strong></td>
<td align="left" valign="middle"><span id="spryselect2">
<label for="ward"></label>
<select name="ward" id="ward">
<option value="" selected="selected">Please select</option>
<option value="AdagbeMmimi">AdagbeMmimi</option>
<option value="Aga">Aga</option>
<option value="Anugama">Anugama</option>
<option value="Esike">Esike</option>
<option value="Etele">Etele</option>
<option value="Mmimi">Mmimi</option>
<option value="Eziakpaka">Eziakpaka</option>
<option value="Okpalo/Nwadika">Okpalo/Nwadika</option>
<option value="Ugwaku/Mgbike">Ugwaku/Mgbike</option>
<option value="Umukwa">Umukwa</option>
<option value="JikoroUfele">JikoroUfele</option>
<option value="Omesu">Omesu</option>
<option value="Umuezunu">Umuezunu</option>
<option value="Urualo/Uruejimofor">Urualo/Uruejimofor</option>
<option value="Urukpaleri">Urukpaleri</option>
<option value="Uruoji">Uruoji</option>
</select>
<span class="selectRequiredMsg">Please select a ward.</span></span></td>
</tr>
<tr>
<td align="left"><strong>Village:</strong></td>
<td align="left" valign="middle"><span id="spryselect3">
<label for="village"></label>
<select name="village" id="village">
<option selected="selected">Please Select...</option>
<option value="Iridana">Iridana</option>
<option value="Mmimi">Mmimi</option>
<option value="Umuezeunu">Umuezeunu</option>
<option value="Umukwa">Umukwa</option>
<option value="EnugoMmimi">EnugoMmimi</option>
<option value="UmumriamObunese">UmumriamObunese</option>
<option value="Urualo">Urualo</option>
<option value="Uruejimofor">Uruejimofor</option>
<option value="Urukpaleri">Urukpaleri</option>
<option value="Uruoji">Uruoji</option>
</select>
<span class="selectRequiredMsg">Please select a village.</span></span></td>
</tr>
<tr>
<td align="left"><strong>Age Grade:</strong></td>
<td align="left" valign="middle"><span id="spryselect4" />
<label for="agegrade"></label>
<select name="agegrade" id="agegrade">          
<option selected="selected">1900-1903</option>
<option>1904-1907</option>
<option>1908-1911</option>
<option>1912-1915</option>
<option>1916-1919</option>
<option>1920-1923</option>
<option>1924-1927</option>
<option>1928-1931</option>
<option>1932-1935</option>
<option>1936-1939</option>
<option>1940-1943</option>
<option>1944-1947</option>
<option>1948-1951</option>
<option>1952-1955</option>
<option>1956-1959</option>
<option>1960-1963</option>
<option>1964-1967</option>
<option>1968-1971</option>
<option>1972-1975</option>
<option>1976-1979</option>
<option>1980-1983</option>
<option>1984-1987</option>
<option>1988-1991</option>
<option>1992-1995</option>
<option>1996-1999</option>
<option>2000-2003</option>
</select>
<script>         
    $(document).ready(function(){             
    $("#agegrade").change(function () {                   
    var str = "";                   
    $("select option:selected").each(function () {               
    str = $(this).text();               
    if(str == "1900-1903")                  
    str = "NAME TO BE PROVIDED";               
    else if(str == "1904-1907")                  
    str = "NAME TO BE PROVIDED";               
    else if(str == "1908-1911")                  
    str = "NAME TO BE PROVIDED";               
    else if(str == "1912-1915")                  
    str = "NAME TO BE PROVIDED";               
    else if(str == "1916-1919")                  
    str = "EGBE NA UGO";
    else if(str == "1920-1923")                  
    str = "NAME TO BE PROVIDED";               
    else if(str == "1924-1927")                  
    str = "IGWEBUIKE";               
    else if(str == "1928-1931")                  
    str = "ANYILIGWE";
    else if(str == "1932-1935")                  
    str = "NAME TO BE PROVIDED";               
    else if(str == "1936-1939")                  
    str = "NAME TO BE PROVIDED";               
    else if(str == "1940-1943")                  
    str = "UCHE BU UKO";
    else if(str == "1944-1947")                  
    str = "NAME TO BE PROVIDED";               
    else if(str == "1948-1951")                  
    str = "OFU OBI";               
    else if(str == "1952-1955")                  
    str = "ANULIKA";
    else if(str == "1956-1959")                  
    str = "IFUNANYA";               
    else if(str == "1960-1963")                  
    str = "NWANNEKA";               
    else if(str == "1964-1967")                  
    str = "NAME TO BE PROVIDED";
    else if(str == "1968-1971")                  
    str = "YET TO BE GROUPED";               
    else if(str == "1972-1975")                  
    str = "YET TO BE GROUPED";               
    else if(str == "1976-1979")                  
    str = "YET TO BE GROUPED";
    else if(str == "1980-1983")                  
    str = "YET TO BE GROUPED";               
    else if(str == "1984-1987")                  
    str = "YET TO BE GROUPED";               
    else if(str == "1988-1991")                  
    str = "YET TO BE GROUPED";
    else if(str == "1992-1995")                  
    str = "YET TO BE GROUPED";               
    else if(str == "1996-1999")                  
    str = "YET TO BE GROUPED";
    else if(str == "2000-2003")                  
    str = "YET TO BE GROUPED";                              
    else
    str = "Please Select An Item";
                           });                   
    $("#adiv").text(str);
     })                 
     .change();         
     });

</script>
</td>
</tr>
<tr>
<td width="167" align="left"><strong>Name Of Age Grade:</strong></td>
<td width="648" align="left" valign="middle">
<label for="NAgegrade"></label>
<input name="NAgegrade" type="text" id="NAgegrade" size="51" maxlength="40" />
</td>
</tr>
<tr>
<td align="left"><strong>Occupation:</strong></td>
<td align="left" valign="middle"><span id="spryselect5">
<label for="occupation"></label>
<select name="occupation" id="occupation">
<option selected="selected">Please Select...</option>
<option value="Architect">Architect</option>
<option value="Business">Business</option>
<option value="Student">Student</option>
<option value="Scientist">Scientist</option>
<option value="Farmer">Farmer</option>
<option value="Lawyer">Lawyer</option>
<option value="Doctor">Doctor</option>
<option value="Professor">Professor</option>
<option value="Engineer">Engineer</option>
<option value="Lecturer">Lecturer</option>
<option value="Teacher">Teacher</option>
<option value="Civil Servant">Civil Servant</option>
<option value="Judge">Judge</option>
<option value="Pharmacist">Pharmacist</option>
<option value="Educationist">Educationist</option>
<option value="Surveyor">Surveyor</option>
<option value="Ploice Officer">Ploice Officer</option>
<option value="Military Officer">Military Officer</option>
<option value="Custom Officer">Custom Officer</option>
<option value="Immigration Officer">Immigration Officer</option>
<option value="others">Others Please specify...</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span></td>
</tr>
<tr>
<td align="left"><strong>Phone Number:</strong></td>
<td align="left" valign="middle"><span id="sprytextfield2">
<label for="phonenumber"></label>
<input name="phonenumber" type="text" id="phonenumber" size="51" maxlength="40" />
<span class="textfieldRequiredMsg">Your Phone Number  is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
</tr>
<tr>
<td align="left"><strong>Email Address:</strong></td>
<td align="left" valign="middle"><span id="sprytextfield3">
<label for="email"></label>
<input name="email" type="text" id="email" size="51" maxlength="40" />
<span class="textfieldRequiredMsg">Your Email  is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
</tr>
<tr>
<td align="left"><strong>Country Of Residence:</strong></td>
<td align="left" valign="middle"><span id="spryselect6">
<label for="country"></label>
<select onchange="print_state('state',this.selectedIndex);" id="country" name="country"></select>
<span class="selectRequiredMsg">Please select an item.</span></span></td>
</tr>
<tr>
<td align="left"><strong>State Of Residence:</strong></td>
<td align="left" valign="middle"><span id="sprytextfield4">
<label for="state"></label>
<select name="state" id="state"></select>
<script language="javascript">print_country("country");</script>
<span class="textfieldRequiredMsg">A value is required.</span></span></td>
</tr>
<tr>
<td align="left"><strong>City Of Residence:</strong></td>
<td align="left" valign="middle"><span id="sprytextfield5">
<label for="city"></label>
<input name="city" type="text" id="city" size="51" maxlength="40" />
<span class="textfieldRequiredMsg">Your city is required.</span></span></td>
</tr>
<tr>
<td align="left"><strong>Address(Optional):</strong></td>
<td align="left" valign="middle"><span id="sprytextarea1">
<label for="address"></label>
<textarea name="address" id="address" cols="45" rows="5"></textarea>
</span></td>
</tr>
<tr>
<td align="left">&nbsp;</td>
<td align="left" valign="middle"><strong>Create your username and password</strong></td>
</tr>
<tr>
<td align="left"><strong>Username:</strong></td>
<td align="left" valign="middle"><span id="sprytextfield8">
<label for="username"></label>
<input name="username" type="text" id="username" size="51" maxlength="40" />
<span class="textfieldRequiredMsg">Your username is required.</span></span></td>
</tr>
<tr>
<td align="left"><strong>Password:</strong></td>
<td align="left" valign="middle"><span id="sprypassword1">
<label for="password"></label>
<input name="password" type="password" id="password" size="51" maxlength="30" />
<span class="passwordMaxCharsMsg">Must be a maximum of 40 characters.</span></span></td>
</tr>
<tr>
<td align="left"><strong>Verify Password:</strong></td>
<td align="left" valign="middle"><span id="spryconfirm1">
<label for="password"></label>
<input name="password2" type="password" id="password" size="51" maxlength="40" />
<span class="confirmRequiredMsg">A value is required.</span><span class="confirmInvalidMsg">The values don't match.</span></span></td>
</tr>
<tr align="left">
<td>&nbsp;</td>
</tr>
<tr align="left">
<td>
<input name="submit" type="submit" id="submit" value="Submit" />
</td>
</tr>
<input type="hidden" name="MM_insert" value="form1" />
</form>

Answer 1

一方面，您的脚本通常应该（如果不是总是）位于页面底部的结束 HTML 和结束正文标记之间。这不仅提高了页面渲染的性能，而且确保在执行任何依赖脚本之前已经渲染了必要的 HTML 元素。

其次，筛选所有标记非常困难。这是您的脚本的精简版（见下文）。我把所有的值都变成了选项本身的属性。这显着降低了代码的复杂性。另外，我不确定为什么您要遍历每个值只是为了获得最后一个选定的值，所以我对其进行了修改以直接获取最后一个选定的值。

接下来，我会将适当的属性添加到您的脚本标签

<script type='text/javascript'>
//... your code
</script>

<div id="adiv"></div>最后，在非工作示例中，我没有在您的表单上看到 div 。也许这是复制和粘贴代码的遗漏，但如果不是，那么它很可能是您的问题的原因。

例子

HTML

<select id="agegrade" name="agegrade" multiple="multiple">          
  <option value='NAME TO BE PROVIDED' selected="selected">1900-1903</option>
  <option value='NAME TO BE PROVIDED'>1904-1907</option>
  <option value='NAME TO BE PROVIDED'>1908-1911</option>
  <option value='NAME TO BE PROVIDED'>1912-1915</option>
  <option value='EGBE NA UGO'>1916-1919</option>
  <option value='NAME TO BE PROVIDED'>1920-1923</option>
  <option value='IGWEBUIKE'>1924-1927</option>
  <option value='ANYILIGWE'>1928-1931</option>
  <option value='NAME TO BE PROVIDED'>1932-1935</option>
  <option value='NAME TO BE PROVIDED'>1936-1939</option>
  <option value='UCHE BU UKO'>1940-1943</option>
  <option value='NAME TO BE PROVIDED'>1944-1947</option>
  <option value='OFU OBI'>1948-1951</option>
  <option value='ANULIKA'>1952-1955</option>
  <option value='IFUNANYA'>1956-1959</option>
  <option value='NWANNEKA'>1960-1963</option>
  <option value='NAME TO BE PROVIDED'>1964-1967</option>
  <option value='YET TO BE GROUPED'>1968-1971</option>
  <option value='YET TO BE GROUPED'>1972-1975</option>
  <option value='YET TO BE GROUPED'>1976-1979</option>
  <option value='YET TO BE GROUPED'>1980-1983</option>
  <option value='YET TO BE GROUPED'>1984-1987</option>
  <option value='YET TO BE GROUPED'>1988-1991</option>
  <option value='YET TO BE GROUPED'>1992-1995</option>
  <option value='YET TO BE GROUPED'>1996-1999</option>
  <option value='YET TO BE GROUPED'>2000-2003</option>
</select>
<div id="adiv"></div>

JS

$(function(){             
  $("#agegrade").change(function () {                           
    $("#adiv").text($("select option:selected:last").val());
  }).change();         
});

Answer 2

<form action="<?php echo $editFormAction; ?>" id="form1" name="form1" method="POST">
      <table width="815" height="1000" border="0" cellpadding="0" cellspacing="0">
        <tr align="left">

        <tr>
          <td align="left"><strong>Registration Page</strong></td>
          <td align="left" valign="middle">&nbsp;</td>
        </tr>
        <tr>
          <td align="left">&nbsp;</td>
          <td align="left" valign="middle">&nbsp;</td>
        </tr>
        <tr>
          <td align="left"><strong>Title: </strong></td>
          <td align="left" valign="middle"><select name="title" id="title">
              <option value="Mr.">Mr.</option>
              <option value="Mrs.">Mrs.</option>
              <option value="Dr.">Dr.</option>
              <option value="Prof.">Prof.</option>
              <option value="Barr.">Barr.</option>
              <option value="Engr">Engr</option>
              <option value="Justice">Justice</option>
              <option value="Evang">Evang</option>
              <option value="Arch">Arch</option>
              <option value="Chief">Chief</option>
              <option value="Hon">Hon</option>
            </select></td>
        </tr>
        <td align="left" valign="middle"><span id="spryselect1">
            <label for="title"></label>
            <span class="selectRequiredMsg">Please select an item.</span></span></td>
        <tr align="left"></tr>
        <tr>
          <td width="167" align="left"><strong>Surname:</strong></td>
          <td width="648" align="left" valign="middle"><span id="sprytextfield1">
              <label for="surname"></label>
              <input name="surname" type="text" id="surname" size="51" maxlength="40" />
              <span class="textfieldRequiredMsg">Your surname is required.</span></span></td>
        </tr>
        <tr>
          <td align="left"><strong>Other Names:</strong></td>
          <td align="left" valign="middle"><label for="othernames"></label>
            <input name="othernames" type="text" id="othernames" size="51" maxlength="40" /></td>
        </tr>
        <tr>
          <td align="left"><strong>Date Of Birth:</strong></td>
          <td align="left" valign="middle"><label for="dob"></label>
            <span id="sprytextfield9">
              <label for="dateofbirth"></label>
              <input type="text" name="dateofbirth" id="dateofbirth" />
              <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span> (format dd/mm/yyyy)                    <tr>
          <td align="left"><strong>Father's Name:</strong></td>
          <td align="left" valign="middle"><span id="sprytextfield6">
              <label for="fathersname"></label>
              <input name="fathersname" type="text" id="fathersname" size="51" maxlength="40" />
              <span class="textfieldRequiredMsg">Your father's name is required.</span></span></td>
        <tr>
        <tr>
          <td align="left"><strong>Mother's Name:</strong></td>
          <td align="left" valign="middle"><span id="sprytextfield7">
              <label for="mothersname"></label>
              <input name="mothersname" type="text" id="mothersname" size="51" maxlength="40" />
              <span class="textfieldRequiredMsg">Your mother's name  is required.</span></span></td>
        </tr>
        <tr>
          <td align="left"><strong>Ward:      </strong></td>
          <td align="left" valign="middle"><span id="spryselect2">
              <label for="ward"></label>
              <select name="ward" id="ward">
                <option value="" selected="selected">Please select</option>
                <option value="AdagbeMmimi">AdagbeMmimi</option>
                <option value="Aga">Aga</option>
                <option value="Anugama">Anugama</option>
                <option value="Esike">Esike</option>
                <option value="Etele">Etele</option>
                <option value="Mmimi">Mmimi</option>
                <option value="Eziakpaka">Eziakpaka</option>
                <option value="Okpalo/Nwadika">Okpalo/Nwadika</option>
                <option value="Ugwaku/Mgbike">Ugwaku/Mgbike</option>
                <option value="Umukwa">Umukwa</option>
                <option value="JikoroUfele">JikoroUfele</option>
                <option value="Omesu">Omesu</option>
                <option value="Umuezunu">Umuezunu</option>
                <option value="Urualo/Uruejimofor">Urualo/Uruejimofor</option>
                <option value="Urukpaleri">Urukpaleri</option>
                <option value="Uruoji">Uruoji</option>
              </select>
              <span class="selectRequiredMsg">Please select a ward.</span></span></td>
        </tr>
        <tr>
          <td align="left"><strong>Village:</strong></td>
          <td align="left" valign="middle"><span id="spryselect3">
              <label for="village"></label>
              <select name="village" id="village">
                <option selected="selected">Please Select...</option>
                <option value="Iridana">Iridana</option>
                <option value="Mmimi">Mmimi</option>
                <option value="Umuezeunu">Umuezeunu</option>
                <option value="Umukwa">Umukwa</option>
                <option value="EnugoMmimi">EnugoMmimi</option>
                <option value="UmumriamObunese">UmumriamObunese</option>
                <option value="Urualo">Urualo</option>
                <option value="Uruejimofor">Uruejimofor</option>
                <option value="Urukpaleri">Urukpaleri</option>
                <option value="Uruoji">Uruoji</option>
              </select>
              <span class="selectRequiredMsg">Please select a village.</span></span></td>
        </tr>
        <tr>
          <td align="left"><strong>Age Grade:</strong></td>
          <td align="left" valign="middle"><span id="spryselect4" >
              <label for="agegrade"></label>
              <select name="agegrade" id="agegrade">       
                <option selected="selected">Please Select An Item</option>
                <option>1900-1903</option>
                <option>1904-1907</option>
                <option>1908-1911</option>
                <option>1912-1915</option>
                <option>1916-1919</option>
                <option>1920-1923</option>
                <option>1924-1927</option>
                <option>1928-1931</option>
                <option>1932-1935</option>
                <option>1936-1939</option>
                <option>1940-1943</option>
                <option>1944-1947</option>
                <option>1948-1951</option>
                <option>1952-1955</option>
                <option>1956-1959</option>
                <option>1960-1963</option>
                <option>1964-1967</option>
                <option>1968-1971</option>
                <option>1972-1975</option>
                <option>1976-1979</option>
                <option>1980-1983</option>
                <option>1984-1987</option>
                <option>1988-1991</option>
                <option>1992-1995</option>
                <option>1996-1999</option>
                <option>2000-2003</option>
              </select>
              <script>         
                $(document).ready(function(){             
                  $("#agegrade").live('change',function () {                   
                    var str = "";                   
                    $("#agegrade option:selected").text();              
                    str = $("#agegrade option:selected").text();               
                    if(str == "1900-1903")                  
                      str = "NAME TO BE PROVIDED";               
                    else if(str == "1904-1907")                  
                      str = "NAME TO BE PROVIDED";               
                    else if(str == "1908-1911")                  
                      str = "NAME TO BE PROVIDED";               
                    else if(str == "1912-1915")                  
                      str = "NAME TO BE PROVIDED";               
                    else if(str == "1916-1919")                  
                      str = "EGBE NA UGO";
                    else if(str == "1920-1923")                  
                      str = "NAME TO BE PROVIDED";               
                    else if(str == "1924-1927")                  
                      str = "IGWEBUIKE";               
                    else if(str == "1928-1931")                  
                      str = "ANYILIGWE";
                    else if(str == "1932-1935")                  
                      str = "NAME TO BE PROVIDED";               
                    else if(str == "1936-1939")                  
                      str = "NAME TO BE PROVIDED";               
                    else if(str == "1940-1943")                  
                      str = "UCHE BU UKO";
                    else if(str == "1944-1947")                  
                      str = "NAME TO BE PROVIDED";               
                    else if(str == "1948-1951")                  
                      str = "OFU OBI";               
                    else if(str == "1952-1955")                  
                      str = "ANULIKA";
                    else if(str == "1956-1959")                  
                      str = "IFUNANYA";               
                    else if(str == "1960-1963")                  
                      str = "NWANNEKA";               
                    else if(str == "1964-1967")                  
                      str = "NAME TO BE PROVIDED";
                    else if(str == "1968-1971")                  
                      str = "YET TO BE GROUPED";               
                    else if(str == "1972-1975")                  
                      str = "YET TO BE GROUPED";               
                    else if(str == "1976-1979")                  
                      str = "YET TO BE GROUPED";
                    else if(str == "1980-1983")                  
                      str = "YET TO BE GROUPED";               
                    else if(str == "1984-1987")                  
                      str = "YET TO BE GROUPED";               
                    else if(str == "1988-1991")                  
                      str = "YET TO BE GROUPED";
                    else if(str == "1992-1995")                  
                      str = "YET TO BE GROUPED";               
                    else if(str == "1996-1999")                  
                      str = "YET TO BE GROUPED";
                    else if(str == "2000-2003")                  
                      str = "YET TO BE GROUPED";                              
                    else
                      str = "Please Select An Item";

                    $("#adiv").text(str);
                  })    
                });

              </script>
            <span id="adiv">Please select an item.</span></span>
          </td>
        </tr>
        <tr>
          <td width="167" align="left"><strong>Name Of Age Grade:</strong></td>
          <td width="648" align="left" valign="middle">
            <label for="NAgegrade"></label>
            <input name="NAgegrade" type="text" id="NAgegrade" size="51" maxlength="40" />
          </td>
        </tr>
        <tr>
          <td align="left"><strong>Occupation:</strong></td>
          <td align="left" valign="middle"><span id="spryselect5">
              <label for="occupation"></label>
              <select name="occupation" id="occupation">
                <option selected="selected">Please Select...</option>
                <option value="Architect">Architect</option>
                <option value="Business">Business</option>
                <option value="Student">Student</option>
                <option value="Scientist">Scientist</option>
                <option value="Farmer">Farmer</option>
                <option value="Lawyer">Lawyer</option>
                <option value="Doctor">Doctor</option>
                <option value="Professor">Professor</option>
                <option value="Engineer">Engineer</option>
                <option value="Lecturer">Lecturer</option>
                <option value="Teacher">Teacher</option>
                <option value="Civil Servant">Civil Servant</option>
                <option value="Judge">Judge</option>
                <option value="Pharmacist">Pharmacist</option>
                <option value="Educationist">Educationist</option>
                <option value="Surveyor">Surveyor</option>
                <option value="Ploice Officer">Ploice Officer</option>
                <option value="Military Officer">Military Officer</option>
                <option value="Custom Officer">Custom Officer</option>
                <option value="Immigration Officer">Immigration Officer</option>
                <option value="others">Others Please specify...</option>
              </select>
              <span class="selectRequiredMsg">Please select an item.</span></span></td>
        </tr>
        <tr>
          <td align="left"><strong>Phone Number:</strong></td>
          <td align="left" valign="middle"><span id="sprytextfield2">
              <label for="phonenumber"></label>
              <input name="phonenumber" type="text" id="phonenumber" size="51" maxlength="40" />
              <span class="textfieldRequiredMsg">Your Phone Number  is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
        </tr>
        <tr>
          <td align="left"><strong>Email Address:</strong></td>
          <td align="left" valign="middle"><span id="sprytextfield3">
              <label for="email"></label>
              <input name="email" type="text" id="email" size="51" maxlength="40" />
              <span class="textfieldRequiredMsg">Your Email  is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
        </tr>
        <tr>
          <td align="left"><strong>Country Of Residence:</strong></td>
          <td align="left" valign="middle"><span id="spryselect6">
              <label for="country"></label>
              <select onchange="print_state('state',this.selectedIndex);" id="country" name="country"></select>
              <span class="selectRequiredMsg">Please select an item.</span></span></td>
        </tr>
        <tr>
          <td align="left"><strong>State Of Residence:</strong></td>
          <td align="left" valign="middle"><span id="sprytextfield4">
              <label for="state"></label>
              <select name="state" id="state"></select>
              <!--<script language="javascript">print_country("country");</script>-->
              <span class="textfieldRequiredMsg">A value is required.</span></span></td>
        </tr>
        <tr>
          <td align="left"><strong>City Of Residence:</strong></td>
          <td align="left" valign="middle"><span id="sprytextfield5">
              <label for="city"></label>
              <input name="city" type="text" id="city" size="51" maxlength="40" />
              <span class="textfieldRequiredMsg">Your city is required.</span></span></td>
        </tr>
        <tr>
          <td align="left"><strong>Address(Optional):</strong></td>
          <td align="left" valign="middle"><span id="sprytextarea1">
              <label for="address"></label>
              <textarea name="address" id="address" cols="45" rows="5"></textarea>
            </span></td>
        </tr>
        <tr>
          <td align="left">&nbsp;</td>
          <td align="left" valign="middle"><strong>Create your username and password</strong></td>
        </tr>
        <tr>
          <td align="left"><strong>Username:</strong></td>
          <td align="left" valign="middle"><span id="sprytextfield8">
              <label for="username"></label>
              <input name="username" type="text" id="username" size="51" maxlength="40" />
              <span class="textfieldRequiredMsg">Your username is required.</span></span></td>
        </tr>
        <tr>
          <td align="left"><strong>Password:</strong></td>
          <td align="left" valign="middle"><span id="sprypassword1">
              <label for="password"></label>
              <input name="password" type="password" id="password" size="51" maxlength="30" />
              <span class="passwordMaxCharsMsg">Must be a maximum of 40 characters.</span></span></td>
        </tr>
        <tr>
          <td align="left"><strong>Verify Password:</strong></td>
          <td align="left" valign="middle"><span id="spryconfirm1">
              <label for="password"></label>
              <input name="password2" type="password" id="password" size="51" maxlength="40" />
              <span class="confirmRequiredMsg">A value is required.</span><span class="confirmInvalidMsg">The values don't match.</span></span></td>
        </tr>
        <tr align="left">
          <td>&nbsp;</td>
        </tr>
        <tr align="left">
          <td>
            <input name="submit" type="submit" id="submit" value="Submit" />
          </td>
        </tr>
      </table>
      <input type="hidden" name="MM_insert" value="form1" />

    </form>