<select id="mysel" name="mysel"> <option value="1">1 xxxxxxxxxx</option> <option value="2">2 yyyyyyyyyy</option> <option value="3">3 zzzzzzzzzz</option> <option value="4">4 wwwwwwwwww</option> </select> <button onclick="setSel(3)">設(shè)置第3項為選中項</button> <button onclick="clearSel()">清空選擇框</button> <button onclick="fillSel()">填充選擇框</button> <button onclick="removeSel()">移除第一項</button> <button onclick="editSel()">修改第一項</button> <button onclick="sortMe(mysel)">排序</button>
<script type="text/javascript"> function setSel(str){ with(document.all){ for(var i=0;i<mysel.options.length;i++){ if (mysel.options[i].value==str){ mysel.selectedIndex=i; break; } } } } function clearSel(){ with(document.all){ mysel.options.length=0; } }
function fillSel(){ with(document.all){ mysel.options.length=0; mysel.options[0] = new Option("1 xxxxxxxxxx","1"); mysel.options[1] = new Option("2 yyyyyyyyyy","2"); mysel.options[2] = new Option("3 zzzzzzzzzz","3"); mysel.options[3] = new Option("4 wwwwwwwwww","4"); mysel.options[4] = new Option("5 aaaaaaaaaa","5"); mysel.selectedIndex = 4; } } function removeSel(){ with(document.all){ mysel.remove(0); if (mysel.options.length>0){ mysel.selectedIndex=0; } } } function editSel(){ with(document.all){ if (mysel.options.length>0){ mysel.options[0] = new Option("這是新的第一項","new Value") mysel.selectedIndex=0; } } }
function sortMe(oSel){ var ln = oSel.options.length; var arr = new Array(); // 這是關(guān)鍵部分 // 將select中的所有option的value值將保存在Array中 for (var i = 0; i < ln; i++) { // 如果需要對option中的文本排序,可以改為arr[i] = oSel.options[i].text; arr[i] = oSel.options[i].value; } arr.sort(); // 開始排序 // 清空Select中全部Option while (ln--) { oSel.options[ln] = null; } // 將排序后的數(shù)組重新添加到Select中 for (i = 0; i < arr.length; i++) { oSel.add(new Option(arr[i], arr[i])); } }
</script>
|