首頁 > 開發者 > JavaScript
相容FireFox、IE，可以上、下、頂部、底部移動的select option的js；<br />原理：<br />置頂：主要是交換當前選擇索引的option和當前選擇索引上面的option的text、value；將這些option向下移動一個索引，最後將選擇的索引的text、value賦值給第0個option即可；<br />向上移動：向上移動就是將當前選擇的索引和當前索引-1也就是當前選擇的上面一個的option的text、value交換；<br />向下移動：和向上相反，將當前選擇的索引selectedIndex進行加1也就是當前選擇的option的下一個option，然後用變數儲存這2個option中的任一個option的text、value進行交換；<br />底部：將選擇的option到options的長度中間的option依次向上交換下text、value，最後將選擇的option的text、value賦給最後一個option即可；</p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br /><html><br /> <head><br /> <title>moveOption.html</title></p><p> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><br /> <meta http-equiv="description" content="this is my page"><br /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><br /> <script language="javascript"><br /><!--<br />function toTop(){<br />var box = document.getElementById("sBox");<br />var index = box.selectedIndex;<br />if(index > 0){<br />var text = box.options[index].text;<br />var val = box.options[index].value;<br />for(var i = index;i > 0; i--){<br />box.options[i].text = box.options[i - 1].text<br />box.options[i].value = box.options[i - 1].value;<br />}<br />box.options[0].value = val;<br />box.options[0].text = text;<br />box.selectedIndex = 0;<br />}<br />} </p><p>function toUp(){<br />var box = document.getElementById("sBox");<br />var index = box.selectedIndex;<br />var i = index - 1;<br />if(index > 0){<br />var text = box.options[i].text;<br />var val = box.options[i].value;<br />box.options[i].text = box.options[index].text<br />box.options[i].value = box.options[index].value;<br />box.options[index].value = val;<br />box.options[index].text = text;<br />box.selectedIndex = i;<br />}<br />} </p><p>function toDown(){<br />var box = document.getElementById("sBox");<br />var index = box.selectedIndex;<br />var i = 0;<br />if(index != box.length - 1){<br />i = index + 1<br />if (index < box.length) {<br />var text = box.options[i].text;<br />var val = box.options[i].value;<br />box.options[i].text = box.options[index].text<br />box.options[i].value = box.options[index].value;<br />box.options[index].value = val;<br />box.options[index].text = text;<br />box.selectedIndex = i;<br />}<br />}<br />} </p><p>function toFoot(){<br />var box = document.getElementById("sBox");<br />var index = box.selectedIndex;<br />var len = box.length;<br />if(index < len - 1){<br />var text = box.options[index].text;<br />var val = box.options[index].value;<br />for(var j = index + 1;j <= len - 1; j++){<br />box.options[j - 1].text = box.options[j].text<br />box.options[j - 1].value = box.options[j].value;<br />}<br />box.options[len - 1].value = val;<br />box.options[len - 1].text = text;<br />box.selectedIndex = len - 1;<br />}<br />}<br />//--><br /></script> </p><p> </head></p><p> <body><br /><select id="sBox" size="10" style="width: 100px; height: 150px;"><br /> <option value=1>A</option><br /> <option value=3>C</option><br /> <option value=4>E</option><br /> <option value=5>F</option><br /> <option value=7>1</option><br /> <option value=12>5</option><br /></select><br /><input type="button" value="頂部" onclick="toTop()"/><br /><input type="button" value="向上" onclick="toUp()"/><br /><input type="button" value="向下" onclick="toDown()"/><br /><input type="button" value="底部" onclick="toFoot()"/><br /> </body><br /></html><br />
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
