jquery移動listbox的值原理及代碼

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

先看看簡單的html，因為伺服器控制項會自動轉換為html標籤，所以在例子中，我並沒有用伺服器控制項。如下：
<asp:ListBox></asp:ListBox>
會自動轉換成：<select></select>
html代碼如下：
複製代碼 代碼如下:
<div style="width:240px;">
<div style="width:100px;float:left;">
<select size="4" name="listLeft" id="listLeft" class="normal">
</select>
</div>
<div style="width:40px;float:left; padding-top:20px;">
<input type="button" id="btnRight" value=">>" /><br />
<input type="button" id="btnLeft" value="<<" />
</div>
<div style="width:100px;float:left;">
<select size="4" name="listRight" id="listRight" class="normal">
</select>
</div>
</div>

json資料結構如下：
複製代碼 代碼如下:
//data
var 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 += "<option value=" + n.data + ">" + 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();
});