jquery移動listbox的值原理及程式碼_jquery

jQuery操作listbox原理並不難，就是將listbox中的選取項目移動，實現我們需要的移動效果。我在範例中使用了json資料結構來動態綁定listbox，這樣也可以熟悉json的使用方法。

先看看簡單的html，因為伺服器控制項會自動轉換為html標籤，所以在範例中，我並沒有用伺服器控制項。如下：

會自動轉換成：
html程式碼如下：

複製程式碼 程式碼如下:

json資料結構如下：

複製程式碼 程式碼如下:

//data
vData = { "datalist":
[
{ "data": "jQuery", "text": "jQuery" },
{ "data": "Asp.net", "text": "Asp.net" },
{ "data": "internet", "text": "internet" },
{ "data": "Sql", "text": "Sql" }
]
};

下邊就是jQuery實作程式碼，其中關鍵地方做了註解。

複製程式碼 程式碼如下:

//bind data
var vlist = "」 ;
//遍歷json資料
jQuery.each(vData.datalist, function(i, n) {
vlist = "" n.text " option>";
});
//綁定資料到listLeft
$("#listLeft").append(vlist);
//left move
$("# btnRight").click(function() {
//資料option選取的資料集合賦值給變數vSelect
var vSelect = $("#listLeft option:selected");
//複製資料新增到listRight中
vSelect.clone().appendTo("#listRight");
//同時移除listRight中的option
vSelect.remove();
});
//right move
$("#btnLeft").click(function() {
var vSelect = $("#listRight option:selected");
vSelect.clone().appendTo(" #listLeft");
vSelect.remove();
});