jQuery操作listbox原理并不难,就是将listbox中的选中项进行移动,实现我们需要的移动效果。我在例子中使用了json数据结构来动态绑定listbox,这样也可以熟悉一下json的使用方法。 先看看简单的html,因为服务器控件会自动转换为html标签,所以在例子中,我并没有用服务器控件。如下: 会自动转换成: html代码如下:
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 += "" + n.text + " "; }); //绑定数据到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(); });
Déclaration: Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn