下拉框的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>
时间： 2024-11-05 23:08:57