黑马程序员技术交流社区

标题: 表单联动的一种实现 [打印本页]

作者: sangwentao 时间: 2016-6-3 20:14
标题: 表单联动的一种实现
表单联动是很基本的网页效果。看了一些帖子，得到以下方法，不知道还有没有更好的方法。
表单联动思想：通过js获取前面表单信息，进而动态生成后面的表单。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单联动</title>
<script type="text/javascript">
      function changevalue(v){
         var select2=document.getElementById('select2');
         while(select2.firstChild){
            select2.removeChild(select2.firstChild);
         }
         switch(v)
         {
            case "coco":
                  var opt1=document.createElement('option');
                  opt1.value="coco1";
                  opt1.innerHTML="coco1";
                  select2.appendChild(opt1);
                  var opt2=document.createElement('option');
                  opt2.value="coco2";
                  opt2.innerHTML="coco2";
                  select2.appendChild(opt2);
                  break;
            case "doom":
                  var opt1=document.createElement('option');
                  opt1.value="doom1";
                  opt1.innerHTML="doom1";
                  select2.appendChild(opt1);
                  var opt2=document.createElement('option');
                  opt2.value="doom2";
                  opt2.innerHTML="doom2";
                  select2.appendChild(opt2);
                  break;
         }
      }
</script>
</head>
<body>
<select id="select1" onchange="changevalue(this.value)">
      <option value="doom">doom</option>
      <option value="coco">coco</option>
</select>
<select id="select2">
</select>
</body>
</html>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2