下拉列表select onChange 就出现一个相关option 的text的带自关闭按钮的js 代码
今天遇到下拉列表select onChange 就出现一个相关option 的text的带自关闭按钮的效果 如下
<html> <head> <title>55</title> <style type="text/css"> .cc_btn { background-color:#FFC; border: 1px solid #B5D0D9; cursor:pointer; } .cc_btn a:hover { background-color: #CCC; } </style> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script> <script type="text/javascript"> $(function(){ var context=$("#context");//button 容器 var i=0; //添加button $("#Drop_cc_emp").change(function(){ var cc_text = $("#Drop_cc_emp").find("option:selected").text(); var cc_value= $("#Drop_cc_emp").find("option:selected").val(); var newbtn=$("<button class='cc_btn' >"+cc_text+" X</button>").appendTo(context); newbtn.click(function(){//删除函数 newbtn.remove(); }); i++; }); }); </script> </head> <body> <p> <select id="Drop_cc_emp" > <option value="020">GZ</option> <option value="021">SH</option> </select> </p> <div id="context"></div> </body> </html>