怎么用DropDownList控制TextBox的显示与隐藏?
日期：2014-05-19 浏览次数：20452 次
如何用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 "
一个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 "
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
