下拉列表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>

posted on 2012-08-01 17:18  webmm  阅读(281)  评论(0)    收藏  举报