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

赞 (0)

相关推荐

  • jquery控制listbox中项的移动并排序

    首先是html代码,页面上放2个listbox控件和2个按钮用于移动项目 复制代码 代码如下: <table border="0"> <tr> <td width="156">全部水果:</td> <td width="142"> </td> <td width="482">我挑选的:</td> </tr> <tr

  • jquery控制listbox中项的移动并排序的实现代码

    首先是html代码,页面上放2个listbox控件和2个按钮用于移动项目 复制代码 代码如下: <table border="0"> <tr> <td width="156">全部水果:</td> <td width="142"> </td> <td width="482">我挑选的:</td> </tr> <tr

  • jquery移动listbox的值原理及代码

    jQuery操作listbox原理并不难,就是将listbox中的选中项进行移动,实现我们需要的移动效果.我在例子中使用了json数据结构来动态绑定listbox,这样也可以熟悉一下json的使用方法. 先看看简单的html,因为服务器控件会自动转换为html标签,所以在例子中,我并没有用服务器控件.如下: <asp:ListBox></asp:ListBox> 会自动转换成:<select></select> html代码如下: 复制代码 代码如下: &l

  • JS和Jquery获取和修改label的值的示例代码

    获取值: label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 复制代码 代码如下: var label=document.getElementById("id"); var value=label.value; var value=$("#id").val(); 可以这样: JS: 复制代码 代码如下: var label=document.getElementById("id"); var value=label

  • jQuery操作复选框(CheckBox)的取值赋值实现代码

    1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $("input:[type='checkbox']:checked").val(); 或者 $("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项: $('input:checkbox').each(function() { if ($(this).attr('c

  • 用jQuery获取table中行id和td值的实现代码

    用jQuery获取table中行id和td值的实现代码 <%@ page language="java" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); %> <!DOCTYPE html> <html lang="zh-cn"> <head> <title>点击</title>

  • jQuery中的RadioButton,input,CheckBox取值赋值实现代码

    1.jquery 获取单选组radio$("input[name='name']:checked").val(); 2.jquery获取radiobutton的下一个值$("input[name='name']:checked").next().text()$("input[name='name']:checked").val() 3.jquery 获取input的值$('#id').val() 4.jquery判断多选框checkbox$(&q

  • jQuery 跨域访问解决原理案例详解

    浏览器端跨域访问一直是个问题,多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明.yahoo js util 的方式解决二级域名跨域访问的问题. 时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了.好在,有jQuery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题...有必要记下来备忘, 跨域的安全限制都是指浏览

  • 关于jQuery对象数据缓存Cache原理以及jQuery.data详解

    关于jQuery对象数据缓存Cache原理以及jQuery.data详解

    网上有很多教你怎么使用jQuery.data(..)来实现数据缓存,但有两个用户经常使用的data([key],[value])和jQuery.data(element,[key],[value])几乎没有什么文章说清楚它们两的区别,所以我用到了,研究下分享给大家.$("").data([key],[value])与jQuery.data(element,[key],[value])的区别这两个函数都是用来在元素上存放数据也就平时所说的数据缓存,都返回jQuery对象,当时我分别在使用

  • jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍

    jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍

    网上有很多教你怎么使用jQuery.data(..)来实现数据缓存,但有两个用户经常使用的data([key],[value])和jQuery.data(element,[key],[value])几乎没有什么文章说清楚它们两的区别,所以我用到了,研究下分享给大家. $("").data([key],[value])与jQuery.data(element,[key],[value])的区别 这两个函数都是用来在元素上存放数据也就平时所说的数据缓存,都返回jQuery对象,当时我分别在

  • jQuery获取多种input值的简单实现方法

    获取input的checked值是否为true: 第一种: if($("input[name=item][value='val']").attr('checked')==true) //判断是否已经打勾 --注:name即控件name属性,value即控件value属性 第二种: 可以不指定属性值,因一组checkbox的value值都会保存其在数据库中对应的id,最好写成如下方式: if($("input[name=row_checkbox]").attr('ch

  • jQuery自定义图片上传插件实例代码

    jQuery自定义图片上传插件实例代码

    摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果 调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q

随机推荐