读取并修改元素的内容：选中项左右移动

最新推荐文章于 2021-06-11 12:28:20 发布

java_zhaoyanli

最新推荐文章于 2021-06-11 12:28:20 发布

阅读量540

点赞数

分类专栏： WEB-DOM

本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/50918583

版权

WEB-DOM 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

html：

<span style="font-size:18px;"><!DOCTYPE HTML>
<html>
<head>
<title>读取并修改元素的内容</title>
<meta charset="utf-8" />
<style>
	select{width:100px;height:85px;}
	div{display:inline-block;width:50px}
</style>

</head>
<body>
	<!--假设两个selectx元素，分别保存备选地区列表和选中地区列表
实现两选择框之间选项的交换：
    包括：当个选中项左右移动
              多个选中项左右移动
              全左移和全右移
要求：两个select中的地区都要按照名称首字母排序
-->
	<select id="unsel" size="5" multiple>
		<option>Argentina</option>
		<option>Brazil</option>
		<option>Canada</option>
		<option>Chile</option>
		<option>China</option>
		<option>Cuba</option>
		<option>Denmark</option>
		<option>Egypt</option>
		<option>France</option>
		<option>Greece</option>
		<option>Spain</option></select>
	<div>
<span style="white-space:pre">		</span><button οnclick="move(this)"><span style="color:#ff0000;">>></span></button>
<span style="white-space:pre">		</span><button οnclick="move(this)"><span style="color:#cc0000;">></span></button>
<span style="white-space:pre">		</span><button οnclick="move(this)"><span style="color:#ff0000;"><</span></button>
<span style="white-space:pre">		</span><button οnclick="move(this)"><span style="color:#ff0000;"><<</span></button>
	</div>
	<select id="sel" size="5" multiple>
	</select>
	<span style="color:#ff0000;"><script src="js/2_2.js"></script></span>
</body>
</html>
</span>

js:

<span style="font-size:18px;">var cts_unsel=[];//保存所有未选中的国家
var cts_sel=[];//保存所有已选中的国家
window.οnlοad=function(){
  //获得id为unsel的select元素的内容，保存在变量innerHTML中
  var innerHTML=unsel.innerHTML;
  //将innerHTML去掉首尾的空字符，再截取8~-9之间的子字符串，再按/<\/option>\s*<option>/切割，将结果保存在cts_unsel中
  cts_unsel=innerHTML.trim()
                     .slice(8,-9)
                     .split(/<\/option>\s*<option>/);
  console.log(String(cts_unsel));
}
function move(btn){
  switch(btn.innerHTML){
    case '>>'://将unsel中所有元素，拼接到sel中
      //在cts_sel的结尾拼接cts_unsel，将结果再保存回cts_sel中
      cts_sel=cts_sel.concat(cts_unsel);
      cts_unsel=[];//将cts_unsel替换为空数组
      break;
    case '<<'://将sel中所有元素，拼接到unsel中
      //在cts_unsel的结尾拼接cts_sel，将结果再保存回cts_unsel中
      cts_unsel=cts_unsel.concat(cts_sel);
      cts_sel=[];//将cts_sel替换为空数组
      break;
    case '>'://将unsel中选中的元素，拼接到sel中
      //从length-1开始，反向遍历unsel中每个option
      for(var i=unsel.options.length-1;i>=0;i--){
        //如果当前option的selected(为true)
        if(unsel.options[i].selected){
          //删除cts_unsel中i位置的1个元素，再拼接到cts_sel中，将结果保存回cts_sel
          cts_sel=cts_sel.concat(cts_unsel.splice(i,1));
        }
      }
      break;
    case '<'://将sel中选中的元素，拼接到unsel中
      //从length-1开始，反向遍历sel中每个option
      for(var i=sel.options.length-1;i>=0;i--){
        //如果当前option的selected(为true)
        if(sel.options[i].selected){
          //删除cts_sel中i位置的1个元素，再拼接到cts_unsel中，将结果保存回cts_sel
          cts_unsel=cts_unsel.concat(cts_sel.splice(i,1));
        }
      }
      break;
  }
  //分别对cts_unsel和cts_sel执行默认排序
  cts_unsel.sort(); cts_sel.sort();
  show();
}
function show(){//在每次修改数组后，将数组更新到页面
  if(cts_unsel.length==0){//如果cts_unsel的length为0
    unsel.innerHTML="";//清空unsel的内容
  }else{//否则，将cts_unsel中的元素，拼接为option元素，将结果保存到unsel元素的内容中
    unsel.innerHTML="<option>"+
      cts_unsel.join("</option><option>")+"</option>";
  }
  if(cts_sel.length==0){//如果cts_sel的length为0
    sel.innerHTML="";//清空sel的内容
  }else{//否则，将cts_sel中的元素，拼接为option元素，将结果保存到unsel元素的内容中
    sel.innerHTML="<option>"+
      cts_sel.join("</option><option>")+"</option>";
  }
}</span>

java_zhaoyanli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
读取并修改元素的内容：选中项左右移动

html：读取并修改元素的内容 select{width:100px;height:85px;} div{display:inline-block;width:50px} <!--假设两个selectx元素，分别保存备选地区列表和选中地区列表实现两选择框之间选项的交换：包括：当个选中项左右移动多个选中项左右移动
复制链接

扫一扫

专栏目录