JQuery不起作用，但在所有浏览器中都是最后一个元素

时间：2015-03-30 06:15:43

标签： javascript jquery

我正在编写一个用于捕获申请人数据的Web应用程序。我正在使用JQuery来隐藏和显示html表。代码段是

<script type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function hideDD(){
var gndr = $('#gender').val();
if(gndr=="Female"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{   
     $("#table_dd").show();     
     }

var cat = $('#category').val();  
if(cat=="SC" || cat=="ST"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{   
     $("#table_dd").show();     
     }

var xsrv = $('#exsrv').val();
if(xsrv=="Yes"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{   
     $("#table_dd").show();     
     }
var PD = $('#PWDPH').val();
if(PD=="Yes"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{   
     $("#table_dd").show();     
     }
}

和html部分是

<tr>
        <td bgcolor="#FFF3D5">5. Gender :<span class="style2">*</span></td>
       <td bgcolor="#FFF3D5"><select name="gender" id="gender" onclick="hideDD()">
            <option value="">Select</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
          </select>
            </td>   

            <!-- <div id="gender">
            Please select whichever is applicable to you <select name="gender" id="gender">
            <option value="">Select</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
          </select>
            </div> -->

      </tr>
      <tr>
        <td bgcolor="#FFF3D5">6. Marital Status :<span class="style2">*</span></td>
       <td bgcolor="#FFF3D5"><select name="maritalstatus" id="maritalstatus">
            <option value="">Select</option>
            <option value="Married">Married</option>
            <option value="Unmarried">Unmarried</option>
            <option value="Widow">Widow</option>
            <option value="Divorced">Divorced</option>
            <option value="Judicially separated and not married">Judicially separated and not married</option>
          </select>
            </td>   
      </tr>
      <tr>
        <td bgcolor="#FFF3D5">7. Date of Birth: <span class="style2">*</span></td>
        <td bgcolor="#FFF3D5"><input name="dateofbirth" type="text" id="dateofbirth" value="<?php echo "$rs1->dateofbirth" ?>" readonly /><span class="style2">(yyyy/mm/dd)</span>
        Your age(as on 31st July 2015):<input name="ageyear" type="text" id="ageyear" size="2" readonly>years<input name="agemonth" type="text" id="agemonth" size="2" readonly>months and<input name="ageday" type="text" id="ageday" size="2" readonly>days
            </td>
      </tr>
      <tr>
        <td bgcolor="#FFF3D5">8. Email:<span class="style2">*</span></td>
        <td bgcolor="#FFF3D5"><input name="afc_email" type="text" id="afc_email" value="<?php echo "$rs1->email" ?>" readonly />
            </td>
      </tr>
      <tr>
        <td bgcolor="#FFF3D5">9. Category :<span class="style2">*</span></td>
       <td bgcolor="#FFF3D5"><select name="category" id="category" onclick="hideDD()">
            <option value="">Select</option>
            <option value="General">General</option>
            <option value="OBC">OBC</option>
            <option value="SC">SC</option>
            <option value="ST">ST</option>
          </select>
            </td>   
      </tr>
      <tr>
        <td bgcolor="#FFF3D5">10 : You are a citizen of India by<span class="style2">*</span></td>
       <td bgcolor="#FFF3D5"><select name="citizen" id="citizen">
            <option value="">Select</option>
            <option value="Birth">Birth</option>
            <option value="Domicile">Domicile</option>
          </select>
            </td>   
      </tr>
      <tr>
        <td bgcolor="#FFF3D5">11 : Religion<span class="style2">*</span></td>
       <td bgcolor="#FFF3D5"><select name="religion" id="religion">
            <option value="">Select</option>
            <option value="Hindu">Hindu</option>
            <option value="Muslims">Muslims</option>
            <option value="Christians">Christians</option>
            <option value="Sikhs">Sikhs</option>
            <option value="Buddhists">Buddhists</option>
            <option value="Zoroastrians">Zoroastrians</option>
             <option value="Others">Others</option>
          </select>
            </td>   
      </tr>

      <tr>
        <td bgcolor="#FFF3D5">12 : Whether Ex-servicemen<span class="style2">*</span></td>
       <td bgcolor="#FFF3D5"><select name="exsrv" id="exsrv" onclick="enb_dis(); hideDD()">
            <option value="">Select</option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
          <table name="table_exserve" id="table_exserve" border="1">
        <tr>
        <td>Have you already secured employment in civil side under central Govt. in Group C and D in regular basis after availing this benefit</td>
        <td bgcolor="#FFF3D5"><select name="exsrv_benefit" id="exsrv_benefit">
            <option value="">Select</option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select> </td>
        </tr>
        <tr>
        <td>Date of appoinment in arm force</td>
        <td bgcolor="#FFF3D5"><input name="exsrv_from" type="text" id="exsrv_from" maxlength="10"/><span class="style2">(yyyy/mm/dd)</span></td>
        </tr>
        <tr>
        <td>Date of discharge / due date of discharge from arm force</td>
        <td bgcolor="#FFF3D5"><input name="exsrv_to" type="text" id="exsrv_to" maxlength="10" onchange="milical()"/><span class="style2">(yyyy/mm/dd)</span></td>
        </tr>
        <tr>
        <td>Length of actual Military services</td>
        <td bgcolor="#FFF3D5"><input name="miliyear" type="text" id="miliyear" size="2" readonly>years<input name="milimonth" type="text" id="milimonth" size="2" readonly>months and<input name="miliday" type="text" id="miliday" size="2" readonly>days</td>
        </tr>
          </table>        
      </tr>
       <tr>
        <td bgcolor="#FFF3D5">13 : Whether person with disability(PWD) / Physically handicapped (PH)<span class="style2">*</span></td>
       <td bgcolor="#FFF3D5"><select name="PWDPH" id="PWDPH" onclick="enb_dis(); hideDD()">
        <option value="">Select</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
          </select>
          <table name="table_PWDPH" id="table_PWDPH" border="1">
        <tr>
        <td>Nature of disability</td>
        <td bgcolor="#FFF3D5"><select name="PWDPH_nature" id="PWDPH_nature">
        <option value="">Select</option>
        <option value="B">B</option>
        <option value="LV">LV</option>
        <option value="PD">PD</option>
        <option value="D">D</option>
        <option value="OA">OA</option>
        <option value="OL">OL</option>
        <option value="BL">BL</option>
          </select> </td>
        </tr>
        <tr>
        <td>Degree of disability</td>
        <td bgcolor="#FFF3D5"><select name="PWDPH_degree" id="PWDPH_degree">
        <option value="">Select</option>
        <option value="40">40</option>
        <option value="41">41</option>
        <option value="42">42</option>
        <option value="43">43</option>
        <option value="44">44</option>
        <option value="45">45</option>
        <option value="46">46</option>
        <option value="47">47</option>
        <option value="48">48</option>
        <option value="49">49</option>
        <option value="50">50</option>
        <option value="51">51</option>
        <option value="52">52</option>
        <option value="53">53</option>
        <option value="54">54</option>
        <option value="55">55</option>
        <option value="56">56</option>
        <option value="57">57</option>
        <option value="58">58</option>
        <option value="59">59</option>
        <option value="60">60</option>
        <option value="61">61</option>
        <option value="62">62</option>
        <option value="63">63</option>
        <option value="64">64</option>
        <option value="65">65</option>
        <option value="66">66</option>
        <option value="67">67</option>
        <option value="68">68</option>
        <option value="69">69</option>
        <option value="70">70</option>
        <option value="71">71</option>
        <option value="72">72</option>
        <option value="73">73</option>
        <option value="74">74</option>
        <option value="75">75</option>
        <option value="76">76</option>
        <option value="77">77</option>
        <option value="78">78</option>
        <option value="79">79</option>
        <option value="80">80</option>
        <option value="81">81</option>
        <option value="82">82</option>
        <option value="83">83</option>
        <option value="84">84</option>
        <option value="85">85</option>
        <option value="86">86</option>
        <option value="87">87</option>
        <option value="88">88</option>
        <option value="89">89</option>
        <option value="90">90</option>
        <option value="91">91</option>
        <option value="92">92</option>
        <option value="93">93</option>
        <option value="94">94</option>
        <option value="95">95</option>
        <option value="96">96</option>
        <option value="97">97</option>
        <option value="98">98</option>
        <option value="99">99</option>
        <option value="100">100</option>

    </select>
        </td>
        </tr>
          </table>        
      </tr>

每次修改时，最后一个jQuery项都运行正常，休息不起作用。例如，在此代码中，只有PWDPD元素工作正常，类别和性别没有正常工作。

2 个答案:

答案 0 :(得分：1)

我在您的代码中进行了一些更改，例如<table>标记未正确实施，如果没有，您开始时已<tr>。因此，在编辑完所有这些内容后，您的代码如下所示：

我在你的功能中保留了一个警告，显示你调用该功能的每个元素，并且我已onclick更改为onchange select元件。

＆＃13;
＆＃13; 
function hideDD() {
    var gndr = $('#gender').val();
	alert(gndr);
	if(gndr=="Female"){
		$("#table_dd").hide();
		$("#dd_bank").val('');
		$("#dd_number").val('');
		$("#dd_date").val('');
	}
	else
	{   
		$("#table_dd").show();     
	}

	var cat = $('#category').val();  
	if(cat=="SC" || cat=="ST"){
		$("#table_dd").hide();
		$("#dd_bank").val('');
		$("#dd_number").val('');
		$("#dd_date").val('');
	}
	else
	{   
		$("#table_dd").show();     
	}

	var xsrv = $('#exsrv').val();
	if(xsrv=="Yes"){
		$("#table_dd").hide();
		$("#dd_bank").val('');
		$("#dd_number").val('');
		$("#dd_date").val('');
	}
	else
	{   
		$("#table_dd").show();     
	}
	
	var PD = $('#PWDPH').val();
	if(PD=="Yes"){
		$("#table_dd").hide();
		$("#dd_bank").val('');
		$("#dd_number").val('');
		$("#dd_date").val('');
	}
	else
	{   
		$("#table_dd").show();     
	}
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tr>
        <td bgcolor="#FFF3D5">5. Gender :<span class="style2">*</span></td>
		<td bgcolor="#FFF3D5">
			<select id="gender" onchange="hideDD()">
				<option value="Select">Select</option>
				<option value="Male">Male</option>
				<option value="Female">Female</option>
			</select>
        </td>   
    </tr>
    <tr>
        <td bgcolor="#FFF3D5">6. Marital Status :<span class="style2">*</span></td>
		<td bgcolor="#FFF3D5">
			<select name="maritalstatus" id="maritalstatus">
				<option value="">Select</option>
				<option value="Married">Married</option>
				<option value="Unmarried">Unmarried</option>
				<option value="Widow">Widow</option>
				<option value="Divorced">Divorced</option>
				<option value="Judicially separated and not married">Judicially separated and not married</option>
			</select>
        </td>   
    </tr>
    <tr>
		<td bgcolor="#FFF3D5">7. Date of Birth: <span class="style2">*</span></td>
        <td bgcolor="#FFF3D5"><input name="dateofbirth" type="text" id="dateofbirth" value="<?php echo "$rs1->dateofbirth" ?>" readonly />
			<span class="style2">(yyyy/mm/dd)</span>
        Your age(as on 31st July 2015):<input name="ageyear" type="text" id="ageyear" size="2" readonly>years<input name="agemonth" type="text" id="agemonth" size="2" readonly>months and<input name="ageday" type="text" id="ageday" size="2" readonly>days
        </td>
    </tr>
    <tr>
        <td bgcolor="#FFF3D5">8. Email:<span class="style2">*</span></td>
        <td bgcolor="#FFF3D5"><input name="afc_email" type="text" id="afc_email" value="<?php echo "$rs1->email" ?>" readonly /></td>
    </tr>
    <tr>
        <td bgcolor="#FFF3D5">9. Category :<span class="style2">*</span></td>
		<td bgcolor="#FFF3D5">
			<select name="category" id="category" onchange="hideDD()">
				<option value="">Select</option>
				<option value="General">General</option>
				<option value="OBC">OBC</option>
				<option value="SC">SC</option>
				<option value="ST">ST</option>
			</select>
        </td>   
    </tr>
    <tr>
		<td bgcolor="#FFF3D5">10 : You are a citizen of India by<span class="style2">*</span></td>
		<td bgcolor="#FFF3D5">
			<select name="citizen" id="citizen">
				<option value="">Select</option>
				<option value="Birth">Birth</option>
				<option value="Domicile">Domicile</option>
			</select>
        </td>   
    </tr>
    <tr>
        <td bgcolor="#FFF3D5">11 : Religion<span class="style2">*</span></td>
		<td bgcolor="#FFF3D5">
			<select name="religion" id="religion">
				<option value="">Select</option>
				<option value="Hindu">Hindu</option>
				<option value="Muslims">Muslims</option>
				<option value="Christians">Christians</option>
				<option value="Sikhs">Sikhs</option>
				<option value="Buddhists">Buddhists</option>
				<option value="Zoroastrians">Zoroastrians</option>
				<option value="Others">Others</option>
			</select>
        </td>   
    </tr>
    <tr>
        <td bgcolor="#FFF3D5">12 : Whether Ex-servicemen<span class="style2">*</span></td>
		<td bgcolor="#FFF3D5">
			<select name="exsrv" id="exsrv" onchange="hideDD()">
				<option value="">Select</option>
				<option value="Yes">Yes</option>
				<option value="No">No</option>
			</select>
			<table name="table_exserve" id="table_exserve" border="1">
				<tr>
					<td>Have you already secured employment in civil side under central Govt. in Group C and D in regular basis after availing this benefit</td>
					<td bgcolor="#FFF3D5">
						<select name="exsrv_benefit" id="exsrv_benefit">
							<option value="">Select</option>
							<option value="Yes">Yes</option>
							<option value="No">No</option>
						</select> 
					</td>
				</tr>
				<tr>
					<td>Date of appoinment in arm force</td>
					<td bgcolor="#FFF3D5"><input name="exsrv_from" type="text" id="exsrv_from" maxlength="10"/><span class="style2">(yyyy/mm/dd)</span></td>
				</tr>
				<tr>
					<td>Date of discharge / due date of discharge from arm force</td>
					<td bgcolor="#FFF3D5"><input name="exsrv_to" type="text" id="exsrv_to" maxlength="10" onchange="milical()"/><span class="style2">(yyyy/mm/dd)</span></td>
				</tr>
				<tr>
					<td>Length of actual Military services</td>
					<td bgcolor="#FFF3D5"><input name="miliyear" type="text" id="miliyear" size="2" readonly>years<input name="milimonth" type="text" id="milimonth" size="2" readonly>months and<input name="miliday" type="text" id="miliday" size="2" readonly>days</td>
				</tr>
			</table>
		</td>
	</tr>
    <tr>
		<td bgcolor="#FFF3D5">13 : Whether person with disability(PWD) / Physically handicapped (PH)<span class="style2">*</span></td>
		<td bgcolor="#FFF3D5">
			<select name="PWDPH" id="PWDPH" onchange="hideDD();">
				<option value="">Select</option>
				<option value="Yes">Yes</option>
				<option value="No">No</option>
			</select>
			<table name="table_PWDPH" id="table_PWDPH" border="1">
				<tr>
					<td>Nature of disability</td>
					<td bgcolor="#FFF3D5">
						<select name="PWDPH_nature" id="PWDPH_nature">
							<option value="">Select</option>
							<option value="B">B</option>
							<option value="LV">LV</option>
							<option value="PD">PD</option>
							<option value="D">D</option>
							<option value="OA">OA</option>
							<option value="OL">OL</option>
							<option value="BL">BL</option>
						</select> 
					</td>
				</tr>
				<tr>
					<td>Degree of disability</td>
					<td bgcolor="#FFF3D5">
						<select name="PWDPH_degree" id="PWDPH_degree">
							<option value="">Select</option>
							<option value="40">40</option>
							<option value="41">41</option>
							<option value="42">42</option>
							<option value="43">43</option>
							<option value="44">44</option>
							<option value="45">45</option>
							<option value="46">46</option>
							<option value="47">47</option>
							<option value="48">48</option>
							<option value="49">49</option>
							<option value="50">50</option>
							<option value="51">51</option>
							<option value="52">52</option>
							<option value="53">53</option>
							<option value="54">54</option>
							<option value="55">55</option>
							<option value="56">56</option>
							<option value="57">57</option>
							<option value="58">58</option>
							<option value="59">59</option>
							<option value="60">60</option>
							<option value="61">61</option>
							<option value="62">62</option>
							<option value="63">63</option>
							<option value="64">64</option>
							<option value="65">65</option>
							<option value="66">66</option>
							<option value="67">67</option>
							<option value="68">68</option>
							<option value="69">69</option>
							<option value="70">70</option>
							<option value="71">71</option>
							<option value="72">72</option>
							<option value="73">73</option>
							<option value="74">74</option>
							<option value="75">75</option>
							<option value="76">76</option>
							<option value="77">77</option>
							<option value="78">78</option>
							<option value="79">79</option>
							<option value="80">80</option>
							<option value="81">81</option>
							<option value="82">82</option>
							<option value="83">83</option>
							<option value="84">84</option>
							<option value="85">85</option>
							<option value="86">86</option>
							<option value="87">87</option>
							<option value="88">88</option>
							<option value="89">89</option>
							<option value="90">90</option>
							<option value="91">91</option>
							<option value="92">92</option>
							<option value="93">93</option>
							<option value="94">94</option>
							<option value="95">95</option>
							<option value="96">96</option>
							<option value="97">97</option>
							<option value="98">98</option>
							<option value="99">99</option>
							<option value="100">100</option>
						</select>
					</td>
				</tr>
			</table>        
		</td>
	</tr>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

尝试将代码置于其中：

$(document).ready(function(){
    YOUR CODE HERE
});
相关问题
最新问题