首页 > 代码库 > 关于下拉框的onchange事件和onclick选择value值。
关于下拉框的onchange事件和onclick选择value值。
下拉框的onchange事件和onclick，一般最好都选择onchange事件，onclick可能会不兼容有些浏览器。
下面是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择</title>
<script src="http://www.mamicode.com/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(optvaluehttp://www.mamicode.com/=="1"){
$( "#select1" ).show();
$( "#select2" ).hide();
$( "#select3" ).hide();
}
else if(optvaluehttp://www.mamicode.com/=="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="http://www.mamicode.com/1"></option>
<option value="http://www.mamicode.com/2"></option>
<option value="http://www.mamicode.com/3"></option>
</select>
</div>
<div id="two">
<select name="" id="select2"
style="display: none"
onchange="showlist(this.value)">
<option value="http://www.mamicode.com/1"></option>
<option value="http://www.mamicode.com/2"></option>
<option value="http://www.mamicode.com/3"></option>
</select>
</div>
<div id="three">
<select name="" id="select3"
style="display: none"
onchange="showlist(this.value)">
<option value="http://www.mamicode.com/1"></option>
<option value="http://www.mamicode.com/2"></option>
<option value="http://www.mamicode.com/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 =http://www.mamicode.com/=1 )
{
$( "#select1" ).show();
$( "#select2" ).hide();
$( "#select3" ).hide();
}
else
if( this.value =http://www.mamicode.com/=2 )
{
$( "#select2" ).show();
$( "#select1" ).hide();
$( "#select3" ).hide();
}
else
{
$( "#select3" ).show();
$( "#select1" ).hide();
$( "#select2" ).hide();
}
}
}*/
} );
</script>
</body>
</html>
关于下拉框的onchange事件和onclick选择value值。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。