11

剛好有個需求要讓<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區，也能馬上體驗!


Comments

# by kink

J大你好... 先說聲"不好意思"，小弟又來提問了:P 每當jquery有問題，第一各想到的就是J大的版，但是看到自己的問題跟您的標題又不甚符合....很猶豫>"< J大是這樣的，小弟在做類似問卷表單的頁面時，把填好的資料在傳送時，已ajax的方式提交並儲存成暫存檔，以便不用在使用資料重新回填資料了，但是偶而發生表單資料是空的@@，不知道針對這問題，在jquery的ajax上能有什麼需要做調整的呢？

# by Jeffrey

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

# by kink

J大..午安 明確的說是，偶而會收到沒資料的表單(不是空白檔案)；我是直接抓html()傳送的，所以感到奇怪！怎麼明明好好一份有資料的表單，利用ajax的方式，會讓表單空白>< 另外我傳出時，有alert看一下是不是真有資料...目前一直找不到頭緒@@~

# by Jeffrey

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

# by KINK

J大~好 小弟知道原因了，但是卻無法可解>< 原來是firefox對html()只抓取表單初始值@@~ 誤會了...不是'偶而':P 關於這樣的限制，不知道J大是否可以提供我任何法子呢？

# by KINK

J大~好 回報一下： 目前是用上傳前再做一次資料回填的笨方式><" 希望有更適當的方式阿: )，似乎找不到可以讓ie與ff並用的方式。

# by Jeffrey

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

# by KNIK

J大~午安 確實是這樣...呵 因為很偷懶沒有回填至後端了。 json是必須好好學一下囉！感謝J大提供。

# by 91

select如果是多選，就蠻有趣的了.. 小的用each的作法失敗了， 因為當選到第1.2.3項時，按向上的按鈕，需求應該是要沒反應。 我的清單卻會變成2.3.1。 目前想的到的似乎只有暫存，最後再做處理... 不曉得黑大有沒有其他更快速的解法...

# by Jeffrey

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

# by 91

最基本的演算法是，針對每一個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」。 不曉得針對這樣的需求，黑大有沒建議的作法？

Post a comment