简单的下拉菜单onchange有关问题
日期：2014-05-16 浏览次数：20418 次
简单的下拉菜单onchange问题
<p>选择列表
<select name="select" id="xuanxiang" onchange="bian()">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
</select>
</p>
<table width="42%" height="149" border="1">
<div id="a1"><tr><td>内容1</td><td> </td></tr></div>
<div id="a2"><tr><td>内容2</td><td> </td></tr></div>
<div id="a3"><tr><td>内容3</td><td> </td></tr></div>
<div id="a4"><tr><td>内容4</td><td> </td></tr></div>
<div id="a5"><tr><td>内容5</td><td> </td></tr></div>
</table>
<p> </p>
</body>
</html>
<script language="javascript">
var zhi=document.getElementById("xuanxiang").value;
var zhi1=zhi.options[zhi.selectedIndex].value;
var a1=document.getElementById("a1");
var a2=document.getElementById("a2");
var a3=document.getElementById("a3");
var a4=document.getElementById("a4");
var a5=document.getElementById("a5");
function bian(){
if (zhi1=="选项1" or zhi1=="选项2")
{
a3.style.display='none';
a4.style.display='none';
a5.style.display='none';
}
else if (zhi1=="选项3")
{
a5.style.display='none';
}
else
{
}
}
</script>
------解决方案--------------------
<p>选择列表
<select name="select" id="xuanxiang" onchange="bian()">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
</select>
</p>
<table width="42%" height="149" border="1">
<div id="a1"><tr><td>内容1</td><td> </td></tr></div>
<div id="a2"><tr><td>内容2</td><td> </td></tr></div>
<div id="a3"><tr><td>内容3</td><td> </td></tr></div>
<div id="a4"><tr><td>内容4</td><td> </td></tr></div>
<div id="a5"><tr><td>内容5</td><td> </td></tr></div>
</table>
<p> </p>
</body>
</html>
<script language="javascript">
var zhi=document.getElementById("xuanxiang").value;
var zhi1=zhi.options[zhi.selectedIndex].value;
var a1=document.getElementById("a1");
var a2=document.getElementById("a2");
var a3=document.getElementById("a3");
var a4=document.getElementById("a4");
var a5=document.getElementById("a5");
function bian(){
if (zhi1=="选项1" or zhi1=="选项2")
{
a3.style.display='none';
a4.style.display='none';
a5.style.display='none';
}
else if (zhi1=="选项3")
{
a5.style.display='none';
}
else
{
}
}
</script>
------解决方案--------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<p>选择列表
<select name="select" id="xuanxiang" onchange="bian()">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
</select>
</p>
<table width="42%" height="149" border="1">
<tr id="a1"><td>内容1</td><td> </td></tr>
<tr id="a2"><td>内容2</td><td> </td></tr>
<tr id="a3"><td>内容3</td><td> </td></tr>
<tr id="a4"><td>内容4</td><td> </td></tr>
<tr id="a5"><td>内容5</td><td> </td></tr>
</table>
<p> </p>
<script language="JavaScript">
var a1=document.getElementById("a1");
var a2=document.getElementById("a2");
var a3=document.getElementById("a3");
var a4=document.getElementById("a4");
var a5=document.getElementById("a5");
function bian(){
va
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
