js学习笔记（二）下拉列表左右选择和全选反选的实现

最新推荐文章于 2023-07-09 10:01:25 发布

pluszzh

最新推荐文章于 2023-07-09 10:01:25 发布

阅读量461

点赞数

分类专栏： js学习笔记

本文链接：https://blog.csdn.net/weixin_43752167/article/details/88086631

版权

js学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

下拉列表左右选择的实现


<html >
 <head>
 
  <title>Htmltest</title>
 </head>
 <body>
 <div id="div1" style="float:left;">
<div>
<select id="select1" multiple="mutiple" style="width:100px;height:100px">
     <option>AAAAA</option>
	 <option>BBBBB</option>
	 <option>CCCCC</option>
	 <option>DDDDD</option>
	 <option>EEEEE</option>
</select>
</div>
<div>
<input type="button" value="选中添加到右边->" onclick="ToRight();"/><br/>
<input type="button" value="全部添加到右边->" onclick="ToRightALL();"/>
</div>
</div>
 
 
 
 <div id="div2">
<div>
<select id="select2" multiple="mutiple" style="width:100px;height:100px">
     <option>FFFFF</option>
	 <option>GGGGG</option>
	 <option>HHHHH</option>
	 <option>IIIII</option>
	 <option>JJJJJ</option>
</select>
</div>
<div>
<input type="button" value="选中添加到左边->" onclick="ToLeft();"/><br/>
<input type="button" value="全部添加到左边->" onclick="ToLeftALL();"/>
</div>
</div>
<script type="text/javascript">
function ToRight()
{
/*步骤:
      1通过document.getElementById("select1")获取select1对象
      2通过节点中的通用方法 getElementsByTag获取select1对象中的标签数组对象
	  3遍历数组对象 通过selected来判断此标记是否被选中
	  4如果被选中 则吧该对象通过appendchild添加到select2标记对象中去
*/
      var select1=document.getElementById("select1");
	  var select2=document.getElementById("select2");
	  var options=select1.getElementsByTagName("option");
	  for(var i=0;i<options.length;i++)
	  {
          var option=options[i];
		  if(option.selected==true)
		  {
			  select2.appendChild(option);
			   i--;//为什么不直接用i=0 因为第二次会直接从数组的第二个元素开始添加，会漏添加一个
		  }
		 
		  //重置i的值因为数组长度是会改变的apendchild相当于一次剪切粘贴炒作 把i重新置为零
	  }
}

function ToLeft()
{
	  var select1=document.getElementById("select1");
	  var select2=document.getElementById("select2");
	  var options=select2.getElementsByTagName("option");
	  for(var i=0;i<options.length;i++)
	  {
          var option=options[i];
		  if(option.selected==true)
		  {
			  select1.appendChild(option);
			   i--;
		  }
		 
		  //重置i的值因为数组长度是会改变的apendchild相当于一次剪切粘贴炒作 把i重新置为零
	  }
}
function ToRightALL()
{
  var select1=document.getElementById("select1");
	  var select2=document.getElementById("select2");
	  var options=select1.getElementsByTagName("option");
	  for(var i=0;i<options.length;i++)
	  {
          var option=options[i];		
		select2.appendChild(option);
		i--;//记得重置i
      }
}
function ToLeftALL()
{
  var select1=document.getElementById("select1");
	  var select2=document.getElementById("select2");
	  var options=select2.getElementsByTagName("option");
	  for(var i=0;i<options.length;i++)
	  {
          var option=options[i];		
		select1.appendChild(option);
		i--;//记得重置i
      }
}



</script>
 </body>
</html>

全选的实现


<html >
 <head>
 
  <title>Htmltest</title>
 </head>
 <body>
 <input type="checkbox" id="box" onclick="selALLNO();"/>全选/全不选<br/>
 <input type="checkbox" name="love" />篮球<br/>
 <input type="checkbox" name="love"/>足球<br/>
 <input type="checkbox"  name="love"/>乒乓球<br/>
 <input type="checkbox"  name="love" />高尔夫<br/>
 <input type="button" value="全选" onclick="selALL();"/>
 <input type="button" value="全不选" onclick="selNO();"/>
 <input type="button" value="反选" onclick="sel();"/>
<script type="text/javascript">
function selALL()
{
 var loves=document.getElementsByName("love");
 for(var i=0;i<loves.length;i++)
 {
   var love=loves[i];
   love.checked=true;
  }
}
function selNO()
{
 var loves=document.getElementsByName("love");
 for(var i=0;i<loves.length;i++)
  {
   var love=loves[i];
   love.checked=false;
  }
}
function selALLNO()
{
	var box=document.getElementById("box");
	if(box.checked==true)
	{
      selALL();
	 }
	 if(box.checked==false)
	{
      selNO();
	 }
}
function sel()
{
	 var loves=document.getElementsByName("love");
 for(var i=0;i<loves.length;i++)
 {
   var love=loves[i];
   if( love.checked==false)
      {
	   love.checked=true;
	   }
	  else if( love.checked==true)
       {
	   love.checked=false;
	   }
  }	
}


</script>
 </body>
</html>

pluszzh

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js学习笔记（二）下拉列表左右选择和全选反选的实现

下拉列表左右选择的实现&lt;html &gt; &lt;head&gt; &lt;title&gt;Htmltest&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="div1" style="float:left;"&gt;&lt;div&gt;&lt
复制链接

扫一扫