ITPub博客

首页 > > > select标签控制选择

select标签控制选择

作者:soloxiao 时间:2019-09-11 14:47:54 0 删除 编辑

如果没有选择值,则弹出提示,如果右边选择了值,怎么控制点击【复制】按钮的时候不能复制。

 1 <html>
 2 <head>
 3 <meta charset="utf-8">
 4 <title>html Dom</title>
 5 <script type="text/javascript">
 6     window.onload=function(){
 7         var sel1=document.getElementById("sel1");
 8         var sel2=document.getElementById("sel2");
 9         var btn=document.getElementById("btn");
10         var op=document.getElementsByTagName("option");
11         var btn1=document.getElementById("btn1");
12         btn.onclick=function(){
13             for(i=0;i<op.length;i++){
14                     if(op[i].selected){
15                         sel1.removeChild(op[i]);
16                     }
17                 }
18         }
19         btn1.onclick=function(){
20             for(i=0;i<op.length;i++){
21                 if(op[i].selected){
22                     sel2.appendChild(op[i].cloneNode(true));    
23                     op[i].selected=false;
24                 }
25             }
26         }
27     }
28 </script>
29 </head>
30 <body>
31     <select id="sel1" multiple="multiple" style="width:100px;height:200px;">
32     <option value="苹果">苹果</option>
33     <option value="苹果1">苹果1</option>
34     <option value="苹果2">苹果2</option>
35     <option value="苹果3">苹果3</option>
36     <option value="苹果4">苹果4</option>
37     <option value="苹果5">苹果5</option>
38     <option value="苹果6">苹果6</option>
39     <option value="苹果7">苹果7</option>
40     </select>
41     <input type="button" value="移除" id="btn"/>
42     <input type="button" value="复制" id="btn1"/>
43     <select id="sel2" multiple="multiple" style="width:100px;height:200px;">
44     </select>
45 </body>
46 </html>


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2079/viewspace-3169781/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-16

  • 博文量
    122
  • 访问量
    823