如何用DropDownList控制TextBox的显示与隐藏???
一个DropDownList(ddl1),分三个下拉项(足球value=1、篮球value=2和游泳value=3).
三个TextBox(txt1,txt2,txt3).
如何实现用：
当DropDownList的value值为1时,txt1显示,txt2和txt3隐藏；
当DropDownList的value值为2时,txt2显示,txt1和txt3隐藏；
当DropDownList的value值为3时,txt3显示,txt1和txt2隐藏；
不会写这段代码，请高人帮忙写一下，高分相送：）
[解决办法]
selectchange事件中写显示还是隐藏
[解决办法]
selectchange事件中自己写一个Javascript的方法改变TextBox的style~~~
styel.display = "none "/ "block " 一个是不显示 一个是显示
[解决办法]
var sSelected = document.getElementById( " <%= ddl1.ClientID%> ").value;
var oTxt1 = document.getElementById( " <%= txt1.ClientID%> ");
var oTxt2 = document.getElementById( " <%= txt2.ClientID%> ");
var oTxt3 = document.getElementById( " <%= txt3.ClientID%> ");
if(sSelected == "1 ")
{
oTxt1.style.display = "block ";
oTxt2.style.display = "none ";
oTxt3.style.display = "none ";
}
....
其他的类似
[解决办法]
<select id= "sel " onchange= "exchange(this.value) ">
<option value= "1 "> 足球 </option>
<option value= "2 "> 篮球 </option>
<option value= "3 "> 游泳 </option>
</select>
<br>
<input type=text id= "foot ">
<input type=text id= "bas ">
<input type=text id= "swing ">
<script>
function exchange(value)
{
var foot = document.getElementById( "foot ");
var bas= document.getElementById( "bas ");
var swing= document.getElementById( "swing ");
switch (value)
{
case "1 ":
foot.style.display = " ";
bas.style.display = swing.style.display = "none ";
break;
}
}
</script>
[解决办法]
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (DropDownList1.Items.FindByValue( "1 ").Selected == true)
{
TextBox1.Text = DropDownList1.SelectedItem.Text;
TextBox1.Visible = true;
TextBox2.Visible = false;
TextBox3.Visible = false;
}
if (DropDownList1.Items.FindByValue( "2 ").Selected == true)
{
TextBox2.Text = DropDownList1.SelectedItem.Text;
TextBox1.Visible = false;
TextBox2.Visible = true;
TextBox3.Visible = false;
}
if (DropDownList1.Items.FindByValue( "3 ").Selected == true)
{
TextBox3.Text = DropDownList1.SelectedItem.Text;
TextBox1.Visible = false;
TextBox2.Visible = false;
TextBox3.Visible = true;
}
}
<body>
<form id= "form1 " runat= "server ">
<div>
<table>
<tr>
<td>
<asp:DropDownList ID= "DropDownList1 " runat= "server " AutoPostBack= "True " OnSelectedIndexChanged= "DropDownList1_SelectedIndexChanged "
Width= "115px ">
<asp:ListItem> </asp:ListItem>
<asp:ListItem Value= "1 "> 足球 </asp:ListItem>
<asp:ListItem Value= "2 "> 篮球 </asp:ListItem>
<asp:ListItem Value= "3 "> 游泳 </asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID= "TextBox1 " runat= "server "> </asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID= "TextBox2 " runat= "server "> </asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID= "TextBox3 " runat= "server "> </asp:TextBox>
</td>
</tr>
</table>
</div>
</form>
</body>
还有一点DropDownList的AutoPostBack的属性要设为true
[解决办法]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE= "JavaScript ">
<!--
function hidTxt(_value)
{
var txtID = 'txt ';
var othOne;
var othTow;
switch(_value)
{
case '1 ':
othOne = txtID + '2 ';
othTow = txtID + '3 ';
txtID += _value;
break;
case '2 ':
othOne = txtID + '1 ';
othTow = txtID + '3 ';
txtID += _value;
break;
case '3 ':
othOne = txtID + '2 ';
othTow = txtID + '1 ';
txtID += _value;
break;
}
alert(txtID + othOne + othTow);
document.getElementById(txtID).style.display = 'block ';
document.getElementById(othOne).style.display = 'none ';
document.getElementById(othTow).style.display = 'none ';
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE= "text " id= "txt1 " value= "test01 " />
<INPUT TYPE= "text " id= "txt2 " value= "test02 " />
<INPUT TYPE= "text " id= "txt3 " value= "test03 " />
<br/>
<SELECT id= "dll " onchange= "javascript:hidTxt(this.value); ">
<OPTION VALUE= "0 " SELECTED> 请选择... </option>
<OPTION VALUE= "1 " > 足球 </option>
<OPTION VALUE= "2 " > 篮球 </option>
<OPTION VALUE= "3 " > 游泳 </option>
</SELECT>
</BODY>
</HTML>
[解决办法]
aspx:
<%@ Page Language= "C# " AutoEventWireup= "true " CodeFile= "Default9.aspx.cs " Inherits= "Default9 " %>
<!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 runat= "server ">
<title> a </title>
<script type= "text/javascript ">
function onSelectChanged(sel)
{
var texts = [
null,
document.getElementById( "txt1 "),
document.getElementById( "txt2 "),
document.getElementById( "txt3 ")];
var value = sel.value;
for(var i=1; i <=3;i++)
{
var style = texts[i].style;
if(value == i)
style.display = "block ";
else
style.display = "none ";
}
}
</script>
</head>
<body>
<form id= "form1 " runat= "server ">
<div>
<asp:DropDownList ID= "DropDownList1 " runat= "server ">
<asp:ListItem Text= "足球 " Value= "1 "> </asp:ListItem>
<asp:ListItem Text= "篮球 " Value= "2 "> </asp:ListItem>
<asp:ListItem Text= "游泳 " Value= "3 "> </asp:ListItem>
</asp:DropDownList>
<br />
<asp:TextBox ID= "txt1 " runat= "server "> </asp:TextBox>
<asp:TextBox ID= "txt2 " runat= "server "> </asp:TextBox>
<asp:TextBox ID= "txt3 " runat= "server "> </asp:TextBox>
</div>
</form>
</body>
</html>
cs:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Default9 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!isPostBack)
{
DropDownList1.Attributes.Add( "onchange ", "javascript:onSelectChanged(this); ");
}
}
}
