jquery - 选择给出错误的值

Question

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

表单已准备就绪，使用 jquery 我可以根据用户选择的等级显示或隐藏部分选择元素。我的问题是当用户选择 std 作为第 5 个时，将显示部分选择元素并且用户选择说“A”并提交。但我得到的值为 0。如果用户选择部分为“D”，则发送的值为“B”。

The section select for all other grades are working fine, this problem arises only when the grade selected is 5th.

脚本

<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() 表单的一个区域时，它不会被删除——只是隐藏在视线之外。因此，您的表单实际上提交了两个名称为sec 的选择下拉列表(和ID——一个很大的禁忌)。您的问题是由第二个选择的值覆盖第一个引起的。

可以通过 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.