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()表单的某个区域时，它不会被删除 - 只是隐藏在视线之外。因此，您的表单实际上是提交了两个选择下拉列表，其中包含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.

Answer 2

以下是代码的缩小版本：

$("#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
})

Answer 3

用例

开关（值）{
     案例6：
     案例7：
     案例8：
     案例9：           $（ “＃sec5”）隐藏（）。           $（ “＃sec6”）显示（）。打破;
}
Double if

if（parseInt（value）== 6）{

选择给出错误的值

3 个答案: