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)來(lái)動(dòng)態(tài)綁定listbox,這樣也可以熟悉一下json的使用方法。
先看看簡(jiǎn)單的html,因?yàn)榉?wù)器控件會(huì)自動(dòng)轉(zhuǎn)換為html標(biāo)簽,所以在例子中,我并沒(méi)有用服務(wù)器控件。如下:
<asp:ListBox></asp:ListBox>
會(huì)自動(dòng)轉(zhuǎn)換成:<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數(shù)據(jù)結(jié)構(gòu)如下:
//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)鍵地方做了注釋。
//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();
});
先看看簡(jiǎn)單的html,因?yàn)榉?wù)器控件會(huì)自動(dòng)轉(zhuǎn)換為html標(biāo)簽,所以在例子中,我并沒(méi)有用服務(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();
});
您可能感興趣的文章:
- JS ListBox的簡(jiǎn)單功能實(shí)現(xiàn)代碼
- js 獲取Listbox選擇的值的代碼
- javascript實(shí)現(xiàn)listbox左右移動(dòng)實(shí)現(xiàn)代碼
- 使用javascript實(shí)現(xiàn)ListBox左右全選,單選,多選,全請(qǐng)
- JavaScript如何從listbox里同時(shí)刪除多個(gè)項(xiàng)目
- 用JavaScript實(shí)現(xiàn)類(lèi)似于ListBox功能示例代碼
- JavaScript控制兩個(gè)列表框listbox左右交換數(shù)據(jù)的方法
- 輕松使用jQuery雙向select控件Bootstrap Dual Listbox
- jquery控制listbox中項(xiàng)的移動(dòng)并排序
- 基于JQUERY的兩個(gè)ListBox子項(xiàng)互相調(diào)整的實(shí)現(xiàn)代碼
- jquery控制listbox中項(xiàng)的移動(dòng)并排序的實(shí)現(xiàn)代碼
- JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能示例
相關(guān)文章
使用JQ來(lái)編寫(xiě)最基本的淡入淡出效果附演示動(dòng)畫(huà)
使用JQ來(lái)編寫(xiě)最基本的淡入淡出效果2014-10-10JQuery 構(gòu)建客戶(hù)/服務(wù)分離的鏈接模型中Table中的排序分析
從上篇文章,我們實(shí)現(xiàn)了Table分頁(yè)代碼的高效性,咱們繼續(xù)沿著這個(gè)思路,探討Table表格數(shù)據(jù)中另外一個(gè)很常見(jiàn)的排序問(wèn)題。說(shuō)到排序,我記得在asp.net中 GridView中提供了這樣的方便,只需在展示字段上加上 Sorting 這樣的屬性,基本就完成了,剩下就是服務(wù)端cs代碼的寫(xiě)法了。2010-01-01jQuery實(shí)現(xiàn)定時(shí)隱藏對(duì)話(huà)框的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)定時(shí)隱藏對(duì)話(huà)框的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery定時(shí)隱藏對(duì)話(huà)框的相關(guān)函數(shù)、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2018-02-02jQuery實(shí)現(xiàn)點(diǎn)擊彈出背景變暗遮罩效果實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊彈出背景變暗遮罩效果的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06js jquery獲取當(dāng)前元素的兄弟級(jí) 上一個(gè) 下一個(gè)元素
js獲取方法要比jq的方法麻煩的多,主要是因?yàn)镕F瀏覽器,因?yàn)镕F瀏覽器也會(huì)把換行當(dāng)作dom元素,下面跟著小編一起來(lái)學(xué)習(xí)js jquery獲取當(dāng)前元素的兄弟級(jí) 上一個(gè) 下一個(gè)元素的,需要的朋友一起來(lái)學(xué)習(xí)吧2015-09-09