简单的下拉菜单onchange有关问题

简单的下拉菜单onchange问题

本帖最后由 aji19810907 于 2014-03-26 10:26:25 编辑

<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>&nbsp;</td></tr>

		<tr id="a2"><td>内容2</td><td>&nbsp;</td></tr>

		<tr id="a3"><td>内容3</td><td>&nbsp;</td></tr>

		<tr id="a4"><td>内容4</td><td>&nbsp;</td></tr>

		<tr id="a5"><td>内容5</td><td>&nbsp;</td></tr>

	</table>

	<p>&nbsp;</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(){

			var zhi=document.getElementById("xuanxiang");

				var zhi1=zhi.options[zhi.selectedIndex].value;


			if (zhi1=="选项1" 
------解决方案--------------------
 zhi1=="选项2")

			{


				//alert(zhi1);

				a3.style.display="none";

				a4.style.display='none';

				a5.style.display='none';

			}

			else if (zhi1=="选项3")

			{

				a5.style.display='none';

			}

			else

			{


			}


		}

	</script>

</body>

</html>

简单的下拉菜单onchange有关问题

相关推荐