2

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

表单已准备就绪，使用 jquery 我可以根据用户选择的等级使部分选择元素显示或隐藏。我的问题是当用户选择第 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>
4

3 回答 3

6

当您show()或hide()表单的一个区域时，它不会被删除 - 只是隐藏在视线之外。因此，您的表单实际上是提交了两个名称为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.
于 2012-08-14T13:29:29.710 回答
1

这里只是代码的缩小版：

$("#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
})
于 2012-08-14T13:36:11.217 回答
0

  1. 用例

    switch (value) {
    case 6:
    case 7:
    case 8:
    case 9: $("#sec5").hide(); $("#sec6").show(); 休息;
    }

  2. 如果加倍

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

于 2012-08-14T13:33:42.873 回答