如何用js根据某个下拉菜单显示对应的注册表单。。

Question

比如。
<form action="" method="get"><select name="">
  <option>选择注册种类</option>
  <option value="1">A类会员</option>
  <option value="2">B类会员</option>
</select><label>
姓名A：<input name="user" type="text" id="user">
职务A：<input name="job" type="text" id="job">
</label><label>
姓名B：<input name="user" type="text" id="user">
职务B：<input name="job" type="text" id="job">
</label>
</form>如果我选择A类会员，那么，下面只显示姓名A和职务A及其对应的文本框。
如果我选择B类会员，那么，下面只显示姓名B和职务B及其对应的文本框。请问该如何实现。

Answer 1

<form action="" method="get">
<select name="" id="sel">
  <option>选择注册种类</option>
  <option value="1">A类会员</option>
  <option value="2">B类会员</option>
</select><label id="lbl1">
姓名A：<input name="user" type="text" id="user">
职务A：<input name="job" type="text" id="job">
</label><label id="lbl2">
姓名B：<input name="user" type="text" id="user">
职务B：<input name="job" type="text" id="job">
</label>
</form><script type="text/javascript">
     var sel = document.getElementById("sel");
     sel.onchange = function() {
           if(sel.value == "1")
           {
                document.getElementById("lbl1").style.display = "block";
                document.getElementById("lbl2").style.display = "none";
           }else{
                document.getElementById("lbl1").style.display = "none";
                document.getElementById("lbl2").style.display = "block";
           }
     }
</script>

Answer 2

如果有多个呢？<label id="lbl1">
姓名A：<input name="user" type="text" id="user">
职务A：<input name="job" type="text" id="job">
</label><label id="lbl2">
姓名B：<input name="user" type="text" id="user">
职务B：<input name="job" type="text" id="job">
</label>
<label id="lbl3">
姓名C：<input name="user" type="text" id="user">
职务C：<input name="job" type="text" id="job">
</label>
<label id="lbl4">
姓名D：<input name="user" type="text" id="user">
职务D：<input name="job" type="text" id="job">
</label><label id="lbl5">
姓名E：<input name="user" type="text" id="user">
职务E：<input name="job" type="text" id="job">
</label>

Answer 3

<form action="" method="get">
<select name="" id="sel">
  <option>选择注册种类</option>
  <option value="1" targetId="lbl1">A类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="2" targetId="lbl2">B类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="2" targetId="lbl3">c类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="2" targetId="lbl4">d类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="2" targetId="lbl5">e类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
</select><label id="lbl1">
姓名A：<input name="user" type="text" id="user">
职务A：<input name="job" type="text" id="job">
</label><label id="lbl2">
姓名B：<input name="user" type="text" id="user">
职务B：<input name="job" type="text" id="job">
</label>
</form><script type="text/javascript">
     var sel = document.getElementById("sel");
     sel.onchange = function() {
           var targetId = sel.options[sel.selectedIndex].getAttribute("targetId");
           var target = document.getElementById(targetId);
           var lbls = document.getElementsByTagName("lable");
           for(var i = 0; i < lbls.length; i++){
                if(lbls[i] == target){
                     lbls[i].style.display = "block";
                }else{
                      lbls[i].style.display = "none";
                }
           }
     }
</script>

Answer 4

<form action="" method="get">
<select name="" id="sel">
  <option>选择注册种类</option>
  <option value="1" targetId="lbl1">A类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="2" targetId="lbl2">B类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="3" targetId="lbl3">c类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="4" targetId="lbl4">d类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="5" targetId="lbl5">e类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
</select><label id="lbl1">
姓名A：<input name="user" type="text" id="user">
职务A：<input name="job" type="text" id="job">
</label><label id="lbl2">
姓名B：<input name="user" type="text" id="user">
职务B：<input name="job" type="text" id="job">
</label>
<label id="lbl3">
姓名C：<input name="user" type="text" id="user">
职务C：<input name="job" type="text" id="job">
</label>
<label id="lbl4">
姓名D：<input name="user" type="text" id="user">
职务D：<input name="job" type="text" id="job">
</label><label id="lbl5">
姓名E：<input name="user" type="text" id="user">
职务E：<input name="job" type="text" id="job">
</label></form>
<script type="text/javascript">
     var sel = document.getElementById("sel");
     sel.onchange = function() {
           var targetId = sel.options[sel.selectedIndex].getAttribute("targetId");
           var target = document.getElementById(targetId);
           var lbls = document.getElementsByTagName("lable");
           for(var i = 0; i < lbls.length; i++){
                if(lbls[i] == target){
                     lbls[i].style.display = "block";
                }else{
                      lbls[i].style.display = "none";
                }
           }
     }
</script>这样子好像无法实现？兄弟可以说具体一些吗，万分感谢了。

Answer 5

var lbls = document.getElementsByTagName("lable");
lable写错了，应该是label

Answer 6

<form action="" method="get">
<select name="" id="sel">
  <option>选择注册种类</option>
  <option value="1" targetId="lbl1">A类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="2" targetId="lbl2">B类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="3" targetId="lbl3">c类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="4" targetId="lbl4">d类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="5" targetId="lbl5">e类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
</select><label id="lbl1">
姓名A：<input name="user" type="text" id="user">
职务A：<input name="job" type="text" id="job">
</label><label id="lbl2">
姓名B：<input name="user" type="text" id="user">
职务B：<input name="job" type="text" id="job">
</label>
<label id="lbl3">
姓名C：<input name="user" type="text" id="user">
职务C：<input name="job" type="text" id="job">
</label>
<label id="lbl4">
姓名D：<input name="user" type="text" id="user">
职务D：<input name="job" type="text" id="job">
</label><label id="lbl5">
姓名E：<input name="user" type="text" id="user">
职务E：<input name="job" type="text" id="job">
</label></form>
<script type="text/javascript">
     var sel = document.getElementById("sel");
     sel.onchange = function() {
           var targetId = sel.options[sel.selectedIndex].getAttribute("targetId");
           var target = document.getElementById(targetId);
           var lbls = document.getElementsByTagName("labl");
           for(var i = 0; i < lbls.length; i++){
                if(lbls[i] == target){
                     lbls[i].style.display = "block";
                }else{
                      lbls[i].style.display = "none";
                }
           }
     }
</script>
我把这段代码保存为htm文件，然后在浏览器里面浏览？没有任何效果？

Answer 7

<form action="" method="get">
<select name="" id="sel">
  <option>选择注册种类</option>
  <option value="1" targetId="lbl1">A类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="2" targetId="lbl2">B类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="3" targetId="lbl3">c类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="4" targetId="lbl4">d类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="5" targetId="lbl5">e类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
</select><label id="lbl1">
姓名A：<input name="user" type="text" id="user">
职务A：<input name="job" type="text" id="job">
</label><label id="lbl2">
姓名B：<input name="user" type="text" id="user">
职务B：<input name="job" type="text" id="job">
</label>
<label id="lbl3">
姓名C：<input name="user" type="text" id="user">
职务C：<input name="job" type="text" id="job">
</label>
<label id="lbl4">
姓名D：<input name="user" type="text" id="user">
职务D：<input name="job" type="text" id="job">
</label><label id="lbl5">
姓名E：<input name="user" type="text" id="user">
职务E：<input name="job" type="text" id="job">
</label></form>
<script type="text/javascript">
     var sel = document.getElementById("sel");
     sel.onchange = function() {
           var targetId = sel.options[sel.selectedIndex].getAttribute("targetId");
           var target = document.getElementById(targetId);
           var lbls = document.getElementsByTagName("label");// 你这里写错了,应该是label
           for(var i = 0; i < lbls.length; i++){
                if(lbls[i] == target){
                     lbls[i].style.display = "block";
                }else{
                      lbls[i].style.display = "none";
                }
           }
     }
</script>

Answer 8

我测试过的，你把我这个保存为html试下，一开始那个label那个单词就写错了...<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>
    <form action="" method="get">
<select name="" id="sel">
  <option>选择注册种类</option>
  <option value="1" targetId="lbl1">A类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="2" targetId="lbl2">B类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="3" targetId="lbl3">c类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="4" targetId="lbl4">d类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
  <option value="5" targetId="lbl5">e类会员</option><!-- 给他设置一个属性，要显示的lbl对象的ID -->
</select><label id="lbl1">
姓名A：<input name="user" type="text" id="user">
职务A：<input name="job" type="text" id="job">
</label><label id="lbl2">
姓名B：<input name="user" type="text" id="user">
职务B：<input name="job" type="text" id="job">
</label>
<label id="lbl3">
姓名C：<input name="user" type="text" id="user">
职务C：<input name="job" type="text" id="job">
</label>
<label id="lbl4">
姓名D：<input name="user" type="text" id="user">
职务D：<input name="job" type="text" id="job">
</label><label id="lbl5">
姓名E：<input name="user" type="text" id="user">
职务E：<input name="job" type="text" id="job">
</label></form>
<script type="text/javascript">
     var sel = document.getElementById("sel");
     sel.onchange = function() {
           var targetId = sel.options[sel.selectedIndex].getAttribute("targetId");
           var target = document.getElementById(targetId);
           var lbls = document.getElementsByTagName("label");
           for(var i = 0; i < lbls.length; i++){
                if(lbls[i] == target){
                     lbls[i].style.display = "block";
                }else{
                      lbls[i].style.display = "none";
                }
           }
     }
</script></body>
</html>