JavaScript13

读取并修改元素的内容

假设两个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("

    +"");

}

你可能感兴趣的:(JavaScript13)