欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery移動listbox的值原理及代碼

 更新時間:2013年05月03日 15:55:44   作者:  
jQuery操作listbox原理并不難,就是將listbox中的選中項進行移動,實現我們需要的移動效果,具體實例如下,感興趣的朋友可以學習下
jQuery操作listbox原理并不難,就是將listbox中的選中項進行移動,實現我們需要的移動效果。我在例子中使用了json數據結構來動態(tài)綁定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();
});

相關文章

  • 使用JQ來編寫最基本的淡入淡出效果附演示動畫

    使用JQ來編寫最基本的淡入淡出效果附演示動畫

    使用JQ來編寫最基本的淡入淡出效果
    2014-10-10
  • JQuery 構建客戶/服務分離的鏈接模型中Table中的排序分析

    JQuery 構建客戶/服務分離的鏈接模型中Table中的排序分析

    從上篇文章,我們實現了Table分頁代碼的高效性,咱們繼續(xù)沿著這個思路,探討Table表格數據中另外一個很常見的排序問題。說到排序,我記得在asp.net中 GridView中提供了這樣的方便,只需在展示字段上加上 Sorting 這樣的屬性,基本就完成了,剩下就是服務端cs代碼的寫法了。
    2010-01-01
  • jQuery實現定時隱藏對話框的方法分析

    jQuery實現定時隱藏對話框的方法分析

    這篇文章主要介紹了jQuery實現定時隱藏對話框的方法,結合實例形式較為詳細的分析了jQuery定時隱藏對話框的相關函數、實現方法與操作注意事項,需要的朋友可以參考下
    2018-02-02
  • jQuery實現點擊彈出背景變暗遮罩效果實例代碼

    jQuery實現點擊彈出背景變暗遮罩效果實例代碼

    這篇文章主要介紹了jQuery實現點擊彈出背景變暗遮罩效果的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • jquery.cookie.js用法實例詳解

    jquery.cookie.js用法實例詳解

    這篇文章主要介紹了jquery.cookie.js用法,結合實例形式較為詳細的分析了jquery.cookie.js針對cookie的獲取、創(chuàng)建、設置、刪除等常用技巧,需要的朋友可以參考下
    2015-12-12
  • jquery取消選擇select下拉框示例代碼

    jquery取消選擇select下拉框示例代碼

    本篇文章主要是對jquery取消選擇select下拉框示例代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-02-02
  • jQuery自帶的一些常用方法總結

    jQuery自帶的一些常用方法總結

    這篇文章主要介紹了jQuery自帶的一些常用方法總結,包括$.trim 、$.contains、$.each、$.map、$.inArray、$.extend等,需要的朋友可以參考下
    2014-09-09
  • jQuery事件對象的屬性和方法詳解

    jQuery事件對象的屬性和方法詳解

    這篇文章主要為大家詳細介紹了jQuery事件對象的屬性和方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-09-09
  • js jquery獲取當前元素的兄弟級 上一個 下一個元素

    js jquery獲取當前元素的兄弟級 上一個 下一個元素

    js獲取方法要比jq的方法麻煩的多,主要是因為FF瀏覽器,因為FF瀏覽器也會把換行當作dom元素,下面跟著小編一起來學習js jquery獲取當前元素的兄弟級 上一個 下一個元素的,需要的朋友一起來學習吧
    2015-09-09
  • jQuery Selector選擇器小結

    jQuery Selector選擇器小結

    jQuery Selector選擇器小結,需要的朋友可以參考下,都是一些常用的選擇控制方式。
    2010-05-05

最新評論