如何实现根据select控件的之不同，而在页面上显示不同的控件组，不如说选项1显示文本框1文本框2，选项2显示文本框3文本框4文本框5文本框6


<!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> new document </title>
  <meta name="generator" content="editplus" />
  <script type="text/javascript">
  <!--
var $ = function(sId){return document.getElementById(sId)}
function show(osel){
var otxt = osel.options[osel.selectedIndex].text;
if(otxt == "选项一"){
$('otxt1').style.display = "block";
$('otxt2').style.display = "block";
$('otxt3').style.display = "none";
$('otxt4').style.display = "none";
$('otxt5').style.display = "none";
$('otxt6').style.display = "none";
}else{
$('otxt1').style.display = "none";
$('otxt2').style.display = "none";
$('otxt3').style.display = "block";
$('otxt4').style.display = "block";
$('otxt5').style.display = "block";
$('otxt6').style.display = "block";
}
}
  //-->
  </script>
 </head> <body>
  <select onchange="show(this)">
  <option></option>
  <option>选项一</option>
  <option>选项二</option>
  </select>
  <br/>
  <input type="text" id="otxt1" style="display:none" />
  <input type="text" id="otxt2" style="display:none"/>
  <input type="text" id="otxt3" style="display:none"/>
  <input type="text" id="otxt4" style="display:none"/>
  <input type="text" id="otxt5" style="display:none"/>
  <input type="text" id="otxt6" style="display:none"/>
 </body>
</html>

解决方案 »

  1.   

    太谢谢了，但是为什么我在写的时候 var otxt = osel.options[osel.selectedIndex].text;
    这行没有options这个项呢，我这定义的osel只有constructor、hasownerproperty、tostring、valueof等属性，
    还有假如我把几个文本控件放在div或者panel里，然后依据select的值实现div或panel的整体显示或隐藏，是不是也是同样的做法呢，刚接触js，谢谢再指教一下，分就给你了
      

  2.   

    差不多，都是根据这个属性：display来的操作的。
      

  3.   

    我这个osel是通过参数传过去的show(this) this是指select控件 所以有options属性 
    DIV也一样 都是通过display可以控制 自己可以试试
      

  4.   

    不好意思，好像还是不行，我建的是Ajax页面，这是一个粗略的内容页，麻烦帮我看一下<%@ Page Language="C#" MasterPageFile="~/DefaultMaster.master" AutoEventWireup="true" CodeFile="Reg.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <script type="text/javascript" language="javascript">
    function identitySelect()
             {
               if(document.getElementById("Select1").value==0)
                 {
                   document.getElementById("TextBox1")
                 }
             }
        </script>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
          <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                     <ContentTemplate>
                           <select id="Select1" onchange="identitySelect(this)">
                                            <option value="0">在校大学生</option>
                                            <option  value="1">专家</option>
                                            <option  value="2">公司/单位</option>
                                            <option  value="3">其他</option>
                                        </select>
                           
                                        <asp:Panel ID="Panel1" runat="server" style="display:none;">
                                                        大学： 
                                                        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                                                        专业：
                                                        <asp:TextBox ID="TextBox16" runat="server"></asp:TextBox>
                                                </Panel>
                                                <asp:Panel ID="Panel2" runat="server" style="display:none;">
                                                        入学时间：
                                                        <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True">
                                                            <asp:ListItem>本科</asp:ListItem>
                                                            <asp:ListItem>硕士</asp:ListItem>
                                                            <asp:ListItem>博士</asp:ListItem>
                                                        </asp:DropDownList>
                                                </Panel>
                                               <asp:Panel ID="Panel3" runat="server" style="display:none;">
                                                        生日：
                                                        <asp:TextBox ID="TextBox17" runat="server"></asp:TextBox>
                                         </asp:Panel>
                                   </ContentTemplate>
                           </asp:UpdatePanel>
                     </asp:Content>
      

  5.   

    因为我套用你给的那个函数的时候还是不行，所以我就想自己写一个，为什么在我的页面里，document.getElementById("Panel1")后面没有style.display属性呢，郁闷，弄了好久了