首頁 > 開發者 > JavaScript

利用javascript設定listBox中各Item的上下順序

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
  今天在重寫後台管理中的排序操作方式的時候，寫了一段運行在用戶端的更改設定listBox控制項中各個項(Item)的上下順序的指令碼程式，現整理一下兒希望對初學javascript的朋友們有所協助，當然也請各位js老鳥們不要笑話。
　　在帖出代碼之前先說些要注意的地方吧：

  • 正常大家在使用此功能的時候其實純粹的在用戶端去調整listBox中Item的上下順序是沒有什麼意義的（當然如果你用AJAX技術最終去儲存那另當別論了），因為在用用戶端的javascript調整的Item順序，在您點擊一個回傳的按紐時順序會回到頁面最初載入的時候的狀態，不光是Item的順序，在用javascript動態添加（刪除）listBox中的Item，回傳後也會儲存不住更改狀態的，這一點就是你用.net中內建的伺服器端控制項listBox也不行。（當然，dropDownList也是不行的），因此對於其更改狀態的儲存就要相對別的控制項麻煩一點兒了。我平常在.net環境下的的處理方法是要用兩個伺服器端的TextBox（將其display:none）分別用分隔字元的形式來順序記錄listBox中項的Text和Value,當然，什麼時候去記錄看需要了，你可以每次在用戶端改變listBox的Item的時候就重新寫一下兩個TextBox的Value，也可以在儲存時先在用戶端重寫一下兒兩個TextBox的Value。用戶端的javascript對於伺服器端的TextBox改變其Value後，回傳伺服器時是可以儲存住更改的Value的，這樣子你就可以在伺服器端通過讀取兩個TextBox的Text屬性從面擷取到用分隔字元分隔的ListBox中的所有Item的Text和Value,這樣子就解決了在伺服器準確獲得listBox狀態的問題。當然，還有一個問題是回傳結束後頁面重新載入後ListBox又回到了頁面開啟時的狀態,顯示上存在著差別，這就需要在頁面的末尾加入一段javascript的指令碼,其要實現的功能是判斷兩個TextBox的Value如不為空白的話首先清空listBox的所有Item,然後在利用split方法分隔兩個TextBox的Value（一個是Text一個是Value），迴圈加入到listBox中就OK了，這樣子在運行過程中就解決了所有問題，做到了ListBox或是dropDownList這類控制項的狀態準確儲存了！
  • 滑鼠點擊後不放以使向上(向下)操作不間斷的進行是需要合理運用setTimeout及clearTimeout兩個方法實現的，具體可以參考代碼。
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <title>排序</title> 
  5. <script> 
  6. var x=null; 
  7. var listObj=null; 
  8. //滑鼠按下不放時的操作 
  9. function setTimeStart(type) 
  10. { 
  11. listObj=document.getElementById('forder'); 
  12. //超過0.3秒啟動連續的向上(下)的操作 
  13. if(type=="up") 
  14. { 
  15. x=setTimeout(upListItem,300); 
  16. }else 
  17. { 
  18. x=setTimeout(downListItem,300); 
  20. } 
  22. } 
  23. //將選中item向上 
  24. function upListItem() 
  25. { 
  26. var selIndex=listObj.selectedIndex; 
  27. if(selIndex<0) 
  28. { 
  29. if(x!=null){clearTimeout(x);} 
  30. return; 
  31. } 
  32. if(selIndex==0) 
  33. { 
  34. if(x!=null){clearTimeout(x);} 
  35. return; 
  36. } 
  37. var selValue=listObj.options[selIndex].value; 
  38. var selText=listObj.options[selIndex].text; 
  39. listObj.options[selIndex].value=listObj.options[selIndex-1].value; 
  40. listObj.options[selIndex].text=listObj.options[selIndex-1].text; 
  41. listObj.options[selIndex-1].value=selValue; 
  42. listObj.options[selIndex-1].text=selText; 
  43. listObj.selectedIndex=selIndex-1; 
  44. if(selIndex+1>0) 
  45. { 
  46. x=setTimeout(upListItem,200) 
  47. } 
  48. } 
  49. //將選中item向下 
  50. function downListItem() 
  51. { 
  52. var selIndex=listObj.selectedIndex; 
  53. if(selIndex<0) 
  54. { 
  55. if(x!=null){clearTimeout(x);} 
  56. return; 
  57. } 
  58. if(selIndex==listObj.options.length-1) 
  59. { 
  60. if(x!=null){clearTimeout(x);} 
  61. return; 
  62. } 
  63. var selValue=listObj.options[selIndex].value; 
  64. var selText=listObj.options[selIndex].text; 
  65. listObj.options[selIndex].value=listObj.options[selIndex+1].value; 
  66. listObj.options[selIndex].text=listObj.options[selIndex+1].text; 
  67. listObj.options[selIndex+1].value=selValue; 
  68. listObj.options[selIndex+1].text=selText; 
  69. listObj.selectedIndex=selIndex+1; 
  70. if(selIndex+1<listObj.options.length-1) 
  71. { 
  72. x=setTimeout(downListItem,200) 
  73. } 
  74. } 
  76. </script> 
  77. </head> 
  78. <body topMargin="20px" leftMargin="10px" rightMargin="0"> 
  79. <TABLE id="Table1" height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0"> 
  80. <TR> 
  81. <TD vAlign="top"> 
  82. <TABLE id="Table4" cellSpacing="0" cellPadding="0" width="100%" border="0"> 
  83. <TR> 
  84. <TD><INPUT class="upBtn" type="button" value="向上↑" onmousedown="setTimeStart('up');" onmouseup="clearTimeout(x);" 
  85. onclick="listObj=document.getElementById('forder');upListItem();clearTimeout(x);" ID="Button1" NAME="Button1"> <INPUT style="WIDTH: 48px; HEIGHT: 22px" type="button" value="↓向下" class="downBtn" onmousedown="setTimeStart('down');" 
  86. onmouseup="clearTimeout(x);" onclick="listObj=document.getElementById('forder');downListItem();clearTimeout(x);" ID="Button2" NAME="Button2">  
  87. </TD> 
  88. </TR> 
  89. <TR> 
  90. <TD> 
  91. <SELECT id="forder" style="WIDTH: 304px; HEIGHT: 240px" size="15"> 
  92. <OPTION value=1>1</OPTION> 
  93. <OPTION value=2>2</OPTION> 
  94. <OPTION value=3>3</OPTION> 
  95. <OPTION value=4>4</OPTION> 
  96. <OPTION value=5>5</OPTION> 
  97. <OPTION value=6>6</OPTION> 
  98. <OPTION value=7>7</OPTION> 
  99. <OPTION value=8>8</OPTION> 
  100. <OPTION value=9>9</OPTION> 
  101. </SELECT></TD> 
  102. </TR> 
  103. </TABLE> 
  104. </TD> 
  105. </TR> 
  106. </TABLE> 
  108. </body> 
  109. </html> 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
listbox php html input type listbox listbox clear net listbox php listbox wpf listbox listbox methods
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More