讀取并修改元素的內(nèi)容
假設(shè)兩個select元素，分別保存?zhèn)溥x地區(qū)列表和選中地區(qū)列表
實現(xiàn)兩選擇框之間選項的交換：
? ? 包括：當(dāng)個選中項左右移動
? ? ? ? ? ? ? 多個選中項左右移動
? ? ? ? ? ? ? 全左移和全右移
要求：兩個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)'>>></button>
? ? ? ? <button onclick='move(this)'>></button>
? ? ? ? <button onclick='move(this)'><</button>
? ? ? ? <button onclick='move(this)'><<</button>
? ? </div>
<select id="sel" size="8" multiple>
</select>
1)將unsel元素中的所有國家名稱填充到unselCts中
unsel的內(nè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 "<<"://
? ? ? 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++){
? ? ? ? //如果當(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 "<":
? ? ? 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++){
? ? ? ? //如果當(dāng)前opt的selected為true
? ? ? ? if(opts[i].selected){
? ? ? ? ? //刪除selCts數(shù)組中當(dāng)前位置的元素，再將刪除的元素拼接到unselCts中
? ? ? ? ? unselCts.push(selCts.splice(i,1));
? ? ? ? }
? ? ? }
? }
將unselCts按國家名稱升序排列
unselCts.sort();
將selCts按國家名稱升序排序
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ǔ)上開頭和結(jié)尾
function updateSel(arr,sel){
? sel.innerHTML=("<option>"+
? ? arr.join("</option><option>")
? ? +"</option>");
}
