CODE-用jQuery實作<select>選項上下移動

剛好有個需求要讓<select>裡的選項可以上下移動,落到本山人手上,想當然爾是用jQuery打死。

除了做了向上、向下鈕外,我還順手加上按【alt-向上】/【alt-向下】移動選項的快速鍵,沒想到程式碼比想像中還簡潔,忍不住貼文讚嘆一番!

嘖嘖嘖,短短兩個API串接: $opt.next().after($opt)就做出了<option>向下移動的效果。記得以往用純Javascript寫,還得判斷是否為最後一個,若是就不能下移;然後上下位置交換得用options[index]搞半天。不得不要再次讚嘆jQuery的神奇!

<html>
<head>
<script type='text/javascript' 
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script type='text/javascript'>
$(function() {
$("#btnMoveUp,#btnMoveDown").click(function() {
  var $opt = $("#selList option:selected:first");
  if (!$opt.length) return;
  if (this.id == "btnMoveUp") $opt.prev().before($opt);
  else $opt.next().after($opt);
});
//按Alt加上下鍵也可以移動
$("#selList").keydown(function(evt) {
  if (!evt.altKey) return;
  var k = evt.which;
  if (k == 38) { $("#btnMoveUp").click(); return false; }
  else if (k == 40) { $("#btnMoveDown").click(); return false; }
});
});
</script>
</head><body>
<select id='selList' size='7' style='width: 100px'>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select><br />
<input type="button" value="▲" id="btnMoveUp" title="快速鍵: alt+向上" />
<input type="button" value="▼" id="btnMoveDown" title="快速鍵: alt+向下"/>
</body>
</html>

以上程式範例可以另存成HTML動手玩看看,或將<body>、$(function() { ... })裡的內容分別貼進Mini jQuery Lab裡Body HTML及Script區,也能馬上體驗!

歡迎推文分享:
Published 18 July 2009 11:22 AM 由 Jeffrey
Filed under: ,


意見

# kink said on 22 July, 2009 09:10 PM

J大你好...

先說聲"不好意思",小弟又來提問了:P

每當jquery有問題,第一各想到的就是J大的版,但是看到自己的問題跟您的標題又不甚符合....很猶豫>"<

J大是這樣的,小弟在做類似問卷表單的頁面時,把填好的資料在傳送時,已ajax的方式提交並儲存成暫存檔,以便不用在使用資料重新回填資料了,但是偶而發生表單資料是空的@@,不知道針對這問題,在jquery的ajax上能有什麼需要做調整的呢?

# Jeffrey said on 22 July, 2009 10:59 PM

to kink, 依你給的線索不太能推敲問題的狀況。建議你用Firebug(FF)或Fiddler2(IE)觀察一下AJAX褙後來往的傳送內容,這樣比較能追查到問題的根源。

# kink said on 23 July, 2009 01:14 AM

J大..午安

明確的說是,偶而會收到沒資料的表單(不是空白檔案);我是直接抓html()傳送的,所以感到奇怪!怎麼明明好好一份有資料的表單,利用ajax的方式,會讓表單空白><

另外我傳出時,有alert看一下是不是真有資料...目前一直找不到頭緒@@~

# Jeffrey said on 23 July, 2009 06:53 AM

to kink, 我是這樣分析, 表單內容空白可能的原因: 1) html()沒抓對資料 2) AJAX沒把資料傳到後方 3) Server端接到資料沒正確保存下來 4) Server端的資料被覆寫成空白 5) 讀取程式沒正確讀出資料。由於每個環節都可能是問題所在,唯有切入各環節觀察側錄取得證據,才容易揪出蟲蟲來。

# KINK said on 23 August, 2009 11:58 PM

J大~好

小弟知道原因了,但是卻無法可解><

原來是firefox對html()只抓取表單初始值@@~

誤會了...不是'偶而':P

關於這樣的限制,不知道J大是否可以提供我任何法子呢?

# KINK said on 24 August, 2009 05:07 AM

J大~好

回報一下:

目前是用上傳前再做一次資料回填的笨方式><"

希望有更適當的方式阿: ),似乎找不到可以讓ie與ff並用的方式。

# Jeffrey said on 24 August, 2009 05:30 AM

to KINK, 不知我有沒有誤解你的意思,你將使用者輸入結果直接以html()方式保存表單內容轉成字串送至後端? 這種做法不太常見,大多會將form serialize成Query string式參數送至後端, 我另外也寫過轉JSON的做法(blog.darkthread.net/.../fields-to-json-plugin.aspx)。用html()這條路上的人應該比較少吧,方法會比較難找,呵...

# KNIK said on 24 August, 2009 10:05 PM

J大~午安

確實是這樣...呵

因為很偷懶沒有回填至後端了。

json是必須好好學一下囉!感謝J大提供。

# 91 said on 19 November, 2009 11:28 PM

select如果是多選,就蠻有趣的了..

小的用each的作法失敗了,

因為當選到第1.2.3項時,按向上的按鈕,需求應該是要沒反應。

我的清單卻會變成2.3.1。

目前想的到的似乎只有暫存,最後再做處理...

不曉得黑大有沒有其他更快速的解法...

# Jeffrey said on 20 November, 2009 09:02 AM

to 91, 沒有很懂你描述的情境,來個範例說明如何?

# 91 said on 20 November, 2009 11:57 PM

最基本的演算法是,針對每一個option來作移動,

當option是第一個位置的時候,則不做事。

實際情況:

清單的項目有1,2,3,4,5。

單選上下都沒問題了。

多選OK的情況:

(A) 選了2,3,按上,清單會變成2,3,1,4,5。

(B) 選了1,3,按上,清單會變成1,3,2,4,5。

(C) 選了2,5,按上,清單會變成2,1,3,5,4。

小的現在碰到的情況是,

選了1,2,按上,清單會變成2,1,3,4,5。

原因是因為 each會從依序從最前面開始判斷,

當1不做事時,下一個2則會跟1換位置,

需求應該是「選了1,2,按上,清單仍維持1,2,3,4,5」。

不曉得針對這樣的需求,黑大有沒建議的作法?

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 

請輸入以上的數字:

搜尋

Go

<July 2009>
SunMonTueWedThuFriSat
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678
 
RSS
【工商服務】
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


BlogLook Score and Rank

Syndication