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

问题描述：

我正在构建一个表单，用于将学生的结果输入到学校数据库中。现在学校有5个第5至第8个标准，第9个至第10个标准有1个。根据另一个选择框的输入动态添加选择框

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

欢迎来到Stackoverflow - 请花些时间阅读[常见问题]（http://stackoverflow.com/faq） - 特别是关于在这里要问什么问题的部分 - 这不是*免费获取代码*网站...这个想法是，你发布一个问题和人力资源试图帮助... – ManseUK 2012-07-26 12:28:43

答

欢迎来到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-27 13:25:09

答

的下面的jQuery让你看的选择元件上的变化，并获得当前选择的元素：

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

然后，您可以使用$（“选择”）显示（）和$（“选择”）。 hide（）方法显示/显示其他元素。

答

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 }

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

});

谢谢你的代码真的帮助完整:) – 2012-07-27 13:28:08

答

我花了一点你所有的想法，并结束了这一点，它的工作原理，并认为我只是发布最终结果

<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>

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

相关推荐