-1

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

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

4

4 回答 4

1

欢迎来到 StackOverflow。

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

在我看来，实现您的要求最简单的方法是在 html 标记中包含两个选择元素，并在适用时隐藏和显示第二个元素。（这不仅比动态添加和删除元素更容易，它还有一个额外的优势，就是让偶尔禁用 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/

于 2012-07-26T12:35:41.253 回答
0

下面的 jQuery 让您可以观察 select 元素的变化，并获取当前选定的元素：

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

然后，您可以使用 $("selector").show() 和 $("selector").hide() 方法来显示/显示其他一些元素。

于 2012-07-26T12:37:18.090 回答
0

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();
            }
        });

});​
于 2012-07-26T12:44:31.447 回答
0

我吸收了你所有的想法，最后得到了这个，它有效，我想我会发布最终结果

<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>
于 2012-08-03T16:47:29.643 回答