讀取并修改元素的內容

假設兩個select元素，分別保存?zhèn)溥x地區(qū)列表和選中地區(qū)列表
實現兩選擇框之間選項的交換：
    包括：當個選中項左右移動
              多個選中項左右移動
              全左移和全右移
要求：兩個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元素中的所有國家名稱填充到unselCts中

unsel的內容去掉開頭和結尾的空字符，再掐頭去尾，按?切割

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

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<opts.length;i++){
        //如果當前opt的selected為true//為什么用true判斷
        if(opts[i].selected){
          //刪除unselCts數組中當前位置的元素，再將刪除的元素拼接到selCts中
          selCts.push(unselCts.splice(i,1));
        }
    }
    break;

是<,就查找id為sel下的所有option，保存在變量opts中
    case "&lt;":
      var opts=document.querySelectorAll(
        "#sel>option"  
      );

反向遍歷opts中每個opt

      for(var i=opts.length-1;i>=0;i--){
        for(var i=0;i<opts.length;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=("<option>"+
    arr.join("</option><option>")
    +"</option>");
}