选择给出错误的值

Question

我正在为学校创建一个数据输入表单.学校将在该数据库中输入5至12年级学生的数据.现在5年级有4个部分,所有其他等级有3个部分.10年级只有一个部分.

表单已准备好并使用jquery我能够根据用户选择的等级显示或隐藏部分选择元素.我的问题是当用户选择std为5th时,显示了section select元素,用户选择说"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.