讀取并修改元素的內(nèi)容

假設(shè)兩個(gè)select元素，分別保存?zhèn)溥x地區(qū)列表和選中地區(qū)列表
實(shí)現(xiàn)兩選擇框之間選項(xiàng)的交換：
包括：當(dāng)個(gè)選中項(xiàng)左右移動(dòng)
多個(gè)選中項(xiàng)左右移動(dòng)
全左移和全右移
要求：兩個(gè)select中的地區(qū)都要按照名稱首字母排序

<select id="unsel" size="8" 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>
        <button onclick='move(this)'>&gt;&gt;</button>
        <button onclick='move(this)'>&gt;</button>
        <button onclick='move(this)'>&lt;</button>
        <button onclick='move(this)'>&lt;&lt;</button>
    </div>
<select id="sel" size="8" multiple>
</select>

1)將unsel元素中的所有國(guó)家名稱填充到unselCts中

unsel的內(nèi)容去掉開(kāi)頭和結(jié)尾的空字符，再掐頭去尾，按?切割

unselCts=
  unsel.innerHTML
       .replace(/^\s+|\s+$/g,"")
       .slice(8,-9)
       .split(/<\/option>\s*<option>/);

2)判斷btn的內(nèi)容

是>>，就將unselCts拼接到selCts結(jié)尾，再保存回selCts中

function move(btn){
  switch(btn.innerHTML){
    case ">>":
      selCts=selCts.concat(unselCts);
      unselCts=[];//將unselCts清空
      break;
是<<，就將selCts拼接到unselCts結(jié)尾，再保存回unselCts中

    case "&lt;&lt;"://
      unselCts=unselCts.concat(selCts);
      selCts=[];//將selCts清空
      break;
是>, 查找id為unsel下的所有option，保存在變量opts中

    case "&gt;":
      var opts=document.querySelectorAll(
        "#unsel>option"
      );
反向遍歷opts中每個(gè)opt

    for(var i=opts.length-1;i>=0;i--){
        for(var i=0;i<opts.length;i++){
        //如果當(dāng)前opt的selected為true//為什么用true判斷
        if(opts[i].selected){
          //刪除unselCts數(shù)組中當(dāng)前位置的元素，再將刪除的元素拼接到selCts中
          selCts.push(unselCts.splice(i,1));
        }
    }
    break;
是<,就查找id為sel下的所有option，保存在變量opts中
    case "&lt;":
      var opts=document.querySelectorAll(
        "#sel>option"  
      );
反向遍歷opts中每個(gè)opt

      for(var i=opts.length-1;i>=0;i--){
        for(var i=0;i<opts.length;i++){
        //如果當(dāng)前opt的selected為true
        if(opts[i].selected){
          //刪除selCts數(shù)組中當(dāng)前位置的元素，再將刪除的元素拼接到unselCts中
          unselCts.push(selCts.splice(i,1));
        }
      }
  }

將unselCts按國(guó)家名稱升序排列

unselCts.sort();
將selCts按國(guó)家名稱升序排序

selCts.sort();
查找id為unsel的元素，保存在unsel中

var unsel=document.getElementById("unsel");
將unselCts數(shù)組的內(nèi)容更新到unsel元素中

 updateSel(unselCts,unsel);
查找id為sel的元素，保存在sel中

  var sel=document.getElementById("sel");
將selCts數(shù)組的內(nèi)容更新到sel元素中

  updateSel(selCts,sel);
}

設(shè)置sel的內(nèi)容為:arr按?拼接，補(bǔ)上開(kāi)頭和結(jié)尾

function updateSel(arr,sel){
  sel.innerHTML=("<option>"+
    arr.join("</option><option>")
    +"</option>");
}