Question

我正在构建一个表格，用于将学生的结果输入学校数据库。现在学校有2个部分，第5到第8个标准，1个，第9到第10个。

这是我想要做的，应该有一个选择框，用户可以选择他想要输入数据的标准，如果所选标准在5到8的限制范围内，那么另一个选择框需要动态添加，可以选择“A部分”或“B部分”。如果用户选择了9年级或10年级，则不应该有任何部分选择框。

Answer 1

欢迎使用StackOverflow。

由于您没有显示任何html标记或尝试自己编写JavaScript，我只会给您一个简单的jQuery解决方案，并留给您以匹配您的实际HTML。

在我看来，最简单的方法是实现你的要求是在html标记中包含两个select元素，然后隐藏并显示第二个适用的元素。（这不仅比动态添加和删除元素更容易，还有一个额外的好处，即可以为偶尔禁用JavaScript的用户访问表单。）

$(document).ready(function() {
    var $section = $("#section").hide();
    $("#standard").change(function() {
        var val = +$(this).val();
        if (val >= 5 && val <= 8)  // assume option elements have value="5", etc.
            $section.show();
        else
            $section.hide();
    });
});

进一步阅读：http://api.jquery.com/

Answer 2

以下jQuery允许您监视select元素的更改，并获取当前选定的元素：

$(function() {
    $("#sections").change(function() {
        var value = $(this).val();
        if(value > 8) {
           //do stuff
        } else {
           //do other stuff
        }
    });
});

然后你可以使用$（“selector”）。show（）和$（“selector”）。hide（）方法显示/显示其他元素。

Answer 3

HTML

<label for="std">Std</label>
  <select id="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>
  </select>
  <span id="gradeContainer" class="hide">
    <label for="grade">Grade</label>
    <select id="grade">
      <option value="0">--Select--</option>
      <option value="1">Grade A</option>
      <option value="2">Grade B</option>
    </select>
  </span>

CSS

.hide { display : none }

JS

    $(function() {
        $("#std").change(function() {
            var value = $(this).val();
            if(parseInt(value,10)>8) {
                $("#gradeContainer").show();
            } else {
               $("#gradeContainer").hide();
            }
        });

});

Answer 4

我接受了你的一些想法并最终得到了这个，它起作用并认为我会发布最终结果

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$("#std").change(function() {
        var value = $(this).val();
        if(parseInt(value,10)>8) {
            $("#gradeContainer").hide();
        } else {
           $("#gradeContainer").show();
        }
    });

});//]]> 
</script>
</head>
<body>
<label for="std">Std</label>
<select id="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>
</select>
<span id="gradeContainer" class="hide">
<label for="grade">Grade</label>
<select id="grade">
  <option value="0">--Select--</option>
  <option value="1">Grade A</option>
  <option value="2">Grade B</option>
</select>
</span>
</body>
</html>

根据另一个选择框的输入动态添加选择框

4 个答案: