jquery移動(dòng)listbox的值原理及代碼

更新時(shí)間：2013年05月03日 15:55:44 作者：

jQuery操作listbox原理并不難，就是將listbox中的選中項(xiàng)進(jìn)行移動(dòng)，實(shí)現(xiàn)我們需要的移動(dòng)效果，具體實(shí)例如下，感興趣的朋友可以學(xué)習(xí)下

jQuery操作listbox原理并不難，就是將listbox中的選中項(xiàng)進(jìn)行移動(dòng)，實(shí)現(xiàn)我們需要的移動(dòng)效果。我在例子中使用了json數(shù)據(jù)結(jié)構(gòu)來動(dòng)態(tài)綁定listbox，這樣也可以熟悉一下json的使用方法。

先看看簡(jiǎn)單的html，因?yàn)榉?wù)器控件會(huì)自動(dòng)轉(zhuǎn)換為html標(biāo)簽，所以在例子中，我并沒有用服務(wù)器控件。如下：
<asp:ListBox></asp:ListBox>
會(huì)自動(dòng)轉(zhuǎn)換成：<select></select>
html代碼如下：

復(fù)制代碼代碼如下:

 
<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數(shù)據(jù)結(jié)構(gòu)如下：

復(fù)制代碼代碼如下:

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

下邊就是jQuery實(shí)現(xiàn)代碼，其中關(guān)鍵地方做了注釋。

復(fù)制代碼代碼如下:

 
//bind data 
var vlist = ""; 
//遍歷json數(shù)據(jù) 
jQuery.each(vData.datalist, function(i, n) { 
vlist += "<option value=" + n.data + ">" + n.text + "</option>"; 
}); 
//綁定數(shù)據(jù)到listLeft 
$("#listLeft").append(vlist); 
//left move 
$("#btnRight").click(function() { 
//數(shù)據(jù)option選中的數(shù)據(jù)集合賦值給變量vSelect 
var vSelect = $("#listLeft option:selected"); 
//克隆數(shù)據(jù)添加到listRight中 
vSelect.clone().appendTo("#listRight"); 
//同時(shí)移除listRight中的option 
vSelect.remove(); 
}); 
//right move 
$("#btnLeft").click(function() { 
var vSelect = $("#listRight option:selected"); 
vSelect.clone().appendTo("#listLeft"); 
vSelect.remove(); 
}); 