手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery移动listbox的值原理及代码
jquery移动listbox的值原理及代码
摘要:jQuery操作listbox原理并不难,就是将listbox中的选中项进行移动,实现我们需要的移动效果。我在例子中使用了json数据结构来...

jQuery操作listbox原理并不难,就是将listbox中的选中项进行移动,实现我们需要的移动效果。我在例子中使用了json数据结构来动态绑定listbox,这样也可以熟悉一下json的使用方法。

先看看简单的html,因为服务器控件会自动转换为html标签,所以在例子中,我并没有用服务器控件。如下:

<asp:ListBox></asp:ListBox>

会自动转换成:<select></select>

html代码如下:

复制代码 代码如下:

<div>

<div>

<select size="4" name="listLeft" id="listLeft">

</select>

</div>

<div>

<input type="button" id="btnRight" value=">>" /><br />

<input type="button" id="btnLeft" value="<<" />

</div>

<div>

<select size="4" name="listRight" id="listRight">

</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();

});

【jquery移动listbox的值原理及代码】相关文章:

JavaScript的while循环的使用

Javascript随机显示图片的源代码

jQuery Timelinr实现垂直水平时间轴插件(附源码下载)

些很实用且必用的小脚本代码

jquery使用each方法遍历json格式数据实例

jquery滚动特效集锦

jquery实现点击label的同时触发文本框点击事件的方法

自适应图片大小的弹出窗口

一些很实用且必用的小脚本代码第1/5页

jquery插件validation实现验证身份证号等

精品推荐
分类导航