关于下拉框的onchange事件和onclick选择value值。
Posted 鹿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于下拉框的onchange事件和onclick选择value值。相关的知识，希望对你有一定的参考价值。
下拉框的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>
以上是关于关于下拉框的onchange事件和onclick选择value值。的主要内容，如果未能解决你的问题，请参考以下文章
jeecg 框架里面的标签 怎么添加 下拉onchange事件