選擇給出錯誤的值

Question

我正在爲學校創建數據輸入表單。學校將爲這個5到12年級的學生輸入數據庫。現在五年級有四個部分，其他所有成績有三個部分。十年級只有一節。

表單準備就緒，並使用jQuery我可以使部分選擇元素顯示或隱藏，取決於用戶選擇的等級。我的問題是當用戶選擇std時，第5部分選擇元素顯示，用戶選擇說「A」並提交。但是，我得到的值爲0.如果用戶選擇節爲「D」，則發送的值爲「B」。

所有其他等級的部分選擇工作正常，只有當選擇的等級爲5時纔會出現此問題。

腳本

<script type='text/javascript' src='scripts/jquery-1.5.2.js'></script> 
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){ 
$("#std").change(function() { 
     var value = $(this).val(); 
     if(parseInt(value)==0) { 
      $("#sec5").hide(); 
      $("#sec6").hide(); 
     } 
     if(parseInt(value)==5) { 
      $("#sec5").show(); 
      $("#sec6").hide(); 
     } 
     if(parseInt(value)==6) { 
      $("#sec5").hide(); 
      $("#sec6").show(); 
     } 
     if(parseInt(value)==7) { 
      $("#sec5").hide(); 
      $("#sec6").show(); 
     } 
    if(parseInt(value)==6) { 
     $("#sec5").hide(); 
     $("#sec6").show(); 
    } 
    if(parseInt(value)==8) { 
     $("#sec5").hide(); 
     $("#sec6").show(); 
    } 
    if(parseInt(value)==9) { 
     $("#sec5").hide(); 
     $("#sec6").show(); 
    } 
    if(parseInt(value)==10) { 
     $("#sec5").hide(); 
     $("#sec6").hide(); 
    } 
    if(parseInt(value)==11) { 
     $("#sec5").hide(); 
     $("#sec6").show(); 
    } 
    if(parseInt(value)==12) { 
     $("#sec5").hide(); 
     $("#sec6").show(); 
    } 
}); 

});//]]> 
</script> 

HTML部分

<form action="check.php" method="post"> 
    <fieldset> 
     <legend>DBMS</legend> 
     <label for="roll">Roll: 
     <input name="roll" type="text" id="roll" value="" size="8" maxlength="10" /> 
     </label> 
     &nbsp; 
     <label for="marks">Total Marks: 
     <input name="marks" type="text" id="marks" value="" size="3" maxlength="3" /> 
     </label> 
     &nbsp; 
     <label for="std">Std</label> 
     <select id="std" name="std"> 
     <option value="0">--Select--</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="8">8</option> 
     <option value="9">9</option> 
     <option value="10">10</option> 
     <option value="11">11</option> 
     <option value="12">12</option> 
     </select> 
     <span id="sec5" class="hide"> 
     &nbsp; 
     <label for="sec">Section</label> 
     <select id="sec" name="sec"> 
     <option value="0">--Select--</option> 
     <option value="A">Sec A</option> 
     <option value="B">Sec B</option> 
     <option value="C">Sec C</option> 
     <option value="D">Sec D</option> 
     </select> 
     </span> <span id="sec6" class="hide"> 
     &nbsp; 
     <label for="sec">Section</label> 
     <select id="sec" name="sec"> 
     <option value="0">--Select--</option> 
     <option value="A">Sec A</option> 
     <option value="B">Sec B</option> 
     <option value="C">Sec C</option> 
     </select> 
     </span> 
     <p align="center"> 
     <input type="submit" name="nlogin" id="nlogin" value="Submit" /> 
     &nbsp; 
     <input type="reset" name="nreset" id="nreset" value="Reset" /> 
     </p> 
    </fieldset> 
    </form> 

Answer 1

當你show()或hide()一個區域的形式，它是不會被刪除 - 從視線中只是被隱藏了。所以你的表格實際上是提交了兩個選擇下拉菜單的名稱（和ID - 一個大的禁止）sec。你的問題是由第二個選擇的值覆蓋第一個引起的。

有可能通過remove()解決這個下拉列表中的一個，但這是不可逆的，我不會推薦它。

相反，您可以更改至少一個選擇下拉列表的名稱/ ID（例如sec1和sec2），並添加一些服務器端代碼以查看應該處理哪一個。

第二種解決方案可能是在HTML中只有一個選擇，並使用jQuery來修改其選項。這將需要重寫大部分JavaScript代碼，但它將消除對服務器端編碼的需求。 （然而，服務器端驗證總是在這些情況下，一個好主意，因爲冗餘，並且無論如何都應該執行。）喜歡的東西：

<select id="sec" name="sec"> 
    <option value="0">--Select--</option> 
    <option id="sec-a" value="A">Sec A</option> 
    <option id="sec-b" value="B">Sec B</option> 
    <option id="sec-c" value="C">Sec C</option> 
    <option id="sec-d" value="D">Sec D</option> 
    </select> 

JS：

$("#std").change(function() { 
    var v = parseInt($(this).val(), 10); // always use a radix 
    if(v==0) { 
     $('#sec').hide(); 
    } else if(v==5) { 
     $('#sec').show(); 
     $('#sec-d').hide(); 
    } else if(v==6) { 
     $('#sec').show(); 
     $('#sec-d').show(); 
    } // etc. 

Answer 2

1. 使用情況下

   開關（值）{
   殼體6：
   殼體7：
   case 8：
   case 9： $（「＃sec5」）。hide（）; $（「＃sec6」）。顯示（）;打破;
   }

2. 雙如果

   如果（parseInt函數（值）== 6）{

Answer 3

這裏只是代碼的縮小的版本：

$("#std").change(function() { 
     var value = parseInt(this.value, 10); 
     $("#sec5").hide(); 
     if (value == 0 || value == 10) { 
      $("#sec6").hide(); 
     } else { 
      $("#sec6").show(); 
     } 
}) 

---

您可以更改可見選擇的name屬性元素，並刪除表單提交中隱藏的一個：

$('form').submit(function(){ 
    $('select').filter(':hidden').remove(); 
    $('select:eq(1)').attr('name', 'theChosenOne') // if the second select is visible 
})