在文本框里输入内容到添加到下拉列表里，移除下拉里的内容
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>下拉列表</title>
6 <script src="jquery-1.11.2.min.js"></script>
7 </head>
8 <body>
9 <select id="sel">
10 <!--文本框-->
11 </select>
12 <input type="text" id="shuru" />
13 <input type="button" value="添加" id="btn" />
14 <input type="button" value="移除" id="yichu" />
15 </body>
16 <script type="text/javascript">
17 $("#btn").click(function(){
18 var v = $("#shuru").val();
19 var str = "<option value='"+v+"'>"+v+"</option>";
20 $("#sel").append(str);//append追加意思
21 })
22
23 $("#yichu").click(function(){
24 var v = $("#shuru").val();
25
26 $("[value='"+v+"']").remove(); //移除
27 })
28 </script>
29 </html>
开关灯效果，遮罩层
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>下拉列表</title>
6 <script src="jquery-1.11.2.min.js"></script>
7 <style type="text/css">
8 #zz{width:100%; height:100%; position:absolute; left:0px; top:0px; background-color:black; z-index:5;filter:alpha(opacity=50);
9 -moz-opacity:0.5;
10 -khtml-opacity: 0.5;
11 opacity: 0.5;}
12 </style>
13
14 </head>
15 <body>
16 <div id="shang" style="position:absolute; z-index:10; left:100px; top:100px;">
17 <input type="button" value="关灯" id="guan" />
18 <input type="button" value="开灯" id="kai" />
19 </div>
20 </body>
21
22 <script type="text/javascript">
23 $("#guan").click(function(){
24 var str = "<div id='zz'></div>";
25 $("body").append(str);
26 $(this).css("display","none");
27 $("#kai").css("display","block");
28 })
29 $("#kai").click(function(){
30 $("#zz").remove();
31 $("#guan").css("display","block");
32 $(this).css("display","none");
33 })
34
35 </script>
36 </html>
