简单js之select操作案例

最新推荐文章于 2024-03-04 05:30:00 发布

简单就好-怒

最新推荐文章于 2024-03-04 05:30:00 发布

阅读量573

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_30085577/article/details/51016080

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>
  <head>
    <title></title>
	<style >
	  select{
	    width:100px;
		height:200px;
	  }
	</style>
    <script>

       function add(){

           var sel1=document.getElementById("sel1");
	       var sel2=document.getElementById("sel2");
             
	     for(var i=sel1.length-1;i>-1;i--){
			 var opt=sel1.options[i];
			 if(opt.selected==true){
	               sel2.options.add(new Option(opt.text,opt.value));
				   sel1.remove(i);
			 }
	     }
       }

       function del(){

          var sel1=document.getElementById("sel1");
		  var sel2=document.getElementById("sel2");
          
		  for(var i=sel2.length-1;i>-1;i--){
              var opt=sel2.options[i];
			  if(opt.selected==true){
			   sel2.remove(i);
			   sel1.options.add(new Option(opt.text,opt.value));
			  }
		  }
       }
    </script>
  </head>
  <body> 
    
     <select id="sel1" name="" size="5" multiple="multiple">
    <option value="0">apple</option>
	<option value="1">orange</option>
	<option value="2">pear</option>
	<option value="3">grape</option>
	<option value="4">banana</option>
	<option value="5">leechee</option>
	<option value="6">pineapple</option>
	<option value="7">cherry</option>
	<option value="8">hawthorn</option>
	<option value="9">melon</option>
	<option value="10">watermelon</option>
     </select>
     <input type="button" value="add" οnclick="add()" />
          <input type="button" value="del" οnclick="del()" />
     <select id="sel2" name="" size="5"  multiple="multiple" ></select>
  </body>
</html>

简单就好-怒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
简单js之select操作案例

select{ width:100px; height:200px; } function add(){ var sel1=document.getElementById("sel1"); var sel2=document.getElementById("sel2");
复制链接

扫一扫