下拉框的onchange事件和onclick,一般最好都选择onchange事件,onclick可能会不兼容有些浏览器。

下面是代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择</title>
<script src="js/lib/jquery/v1.12.3/jquery-1.12.3.js"></script>
<style>
#one {
border: 1px solid salmon;
width: 40px;
height: 100px;
position: absolute;
left: 20px;
}
#two {
border: 1px solid salmon;
width: 40px;
height: 100px;
position: absolute;
left: 61px;
}
#three {
border: 1px solid salmon;
width: 40px;
height: 100px;
position: absolute;
left: 102px;
}
</style>
<script>
function showlist(optvalue){
if(optvalue=="1"){
$( "#select1" ).show();
$( "#select2" ).hide();
$( "#select3" ).hide();
}
else if(optvalue=="2"){
$( "#select2" ).show();
$( "#select1" ).hide();
$( "#select3" ).hide();
}
else{
$( "#select3" ).show();
$( "#select1" ).hide();
$( "#select2" ).hide();
}
}
</script>
</head>
<body>
<div id="one">
<select name="" id="select1" onchange="showlist(this.value)">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
</div>
<div id="two">
<select name="" id="select2"
style="display: none"
onchange="showlist(this.value)">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
</div>
<div id="three">
<select name="" id="select3"
style="display: none"
onchange="showlist(this.value)">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
</div>
<script>
$( document ).ready( function()
{
//这是onclick事件可能有些不兼容,不推荐使用
/*var sel = $( "select" );
var option = sel.children();
console.log( option );
for( var i = 0; i < option.length; i++ )
{
option[ i ].onclick = function()
{
alert( this.value );
if( this.value ==1 )
{
$( "#select1" ).show();
$( "#select2" ).hide();
$( "#select3" ).hide();
}
else
if( this.value ==2 )
{
$( "#select2" ).show();
$( "#select1" ).hide();
$( "#select3" ).hide();
}
else
{
$( "#select3" ).show();
$( "#select1" ).hide();
$( "#select2" ).hide();
}
}
}*/
} );
</script>
</body>
</html>
05-11 13:04