首页 > 代码库 > jQuery-下拉菜单
jQuery-下拉菜单
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>获取或设置元素的值</title> 5 <script type="text/javascript" 6 src="http://www.mamicode.com/Jscript/jquery-1.8.2.min.js"> 7 </script> 8 <style type="text/css"> 9 body{font-size:12px;text-align:center} 10 div{padding:3px;margin:3px;width:120px;float:left} 11 .txt{border:#666 1px solid;padding:3px} 12 </style> 13 <script type="text/javascript"> 14 $(function() { 15 $("select").change(function() { //设置下拉列表框change事件 16 var strSel = $("select").val().join(","); //获取下拉列表框所选中全部选项值 17 $("#p1").html(strSel); //显示下拉列表框所选中全部选项值 18 }) 19 $("input").change(function() { //设置文本框focus事件 20 var strTxt = $("input").val(); //获取文本框的值 21 $("#p2").html(strTxt); //显示文本框所输入的值 22 }) 23 $("input").focus(function() { //设置文本框focus事件 24 $("input").val(""); //清空文本框的值 25 }) 26 }) 27 </script> 28 </head> 29 <body> 30 <div> 31 <select multiple="multiple" style="height:96px;width:85px"> 32 <option value="http://www.mamicode.com/1">Item 1</option> 33 <option value="http://www.mamicode.com/2">Item 2</option> 34 <option value="http://www.mamicode.com/3">Item 3</option> 35 <option value="http://www.mamicode.com/4">Item 4</option> 36 <option value="http://www.mamicode.com/5">Item 5</option> 37 <option value="http://www.mamicode.com/6">Item 6</option> 38 </select> 39 </div> 40 <div> 41 <input type="text" class="txt" id="p1"/> 42 <p id="p2"></p> 43 </div> 44 </body> 45 </html>
jQuery-下拉菜单
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。