读取并修改元素的内容
假设两个select元素,分别保存备选地区列表和选中地区列表
实现两选择框之间选项的交换:
包括:当个选中项左右移动
多个选中项左右移动
全左移和全右移
要求:两个select中的地区都要按照名称首字母排序
1)将unsel元素中的所有国家名称填充到unselCts中
unsel的内容去掉开头和结尾的空字符,再掐头去尾,按?切割
unselCts=
unsel.innerHTML
.replace(/^\s+|\s+$/g,"")
.slice(8,-9)
.split(/<\/option>\s*
2)判断btn的内容
是>>,就将unselCts拼接到selCts结尾,再保存回selCts中
function move(btn){
switch(btn.innerHTML){
case ">>":
selCts=selCts.concat(unselCts);
unselCts=[];//将unselCts清空
break;
是<<,就将selCts拼接到unselCts结尾,再保存回unselCts中
case "<<"://
unselCts=unselCts.concat(selCts);
selCts=[];//将selCts清空
break;
是>, 查找id为unsel下的所有option,保存在变量opts中
case ">":
var opts=document.querySelectorAll(
"#unsel>option"
);
反向遍历opts中每个opt
for(var i=opts.length-1;i>=0;i--){
for(var i=0;i //如果当前opt的selected为true//为什么用true判断 if(opts[i].selected){ //删除unselCts数组中当前位置的元素,再将删除的元素拼接到selCts中 selCts.push(unselCts.splice(i,1)); } } break; 是<,就查找id为sel下的所有option,保存在变量opts中 case "<": var opts=document.querySelectorAll( "#sel>option" ); 反向遍历opts中每个opt for(var i=opts.length-1;i>=0;i--){ for(var i=0;i //如果当前opt的selected为true if(opts[i].selected){ //删除selCts数组中当前位置的元素,再将删除的元素拼接到unselCts中 unselCts.push(selCts.splice(i,1)); } } } 将unselCts按国家名称升序排列 unselCts.sort(); 将selCts按国家名称升序排序 selCts.sort(); 查找id为unsel的元素,保存在unsel中 var unsel=document.getElementById("unsel"); 将unselCts数组的内容更新到unsel元素中 updateSel(unselCts,unsel); 查找id为sel的元素,保存在sel中 var sel=document.getElementById("sel"); 将selCts数组的内容更新到sel元素中 updateSel(selCts,sel); } 设置sel的内容为:arr按?拼接,补上开头和结尾 function updateSel(arr,sel){ sel.innerHTML=(" arr.join(" +""); }