惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

T
The Blog of Author Tim Ferriss
S
Securelist
D
Docker
The Register - Security
The Register - Security
GbyAI
GbyAI
Recorded Future
Recorded Future
Engineering at Meta
Engineering at Meta
Stack Overflow Blog
Stack Overflow Blog
云风的 BLOG
云风的 BLOG
P
Proofpoint News Feed
罗磊的独立博客
博客园 - 【当耐特】
F
Full Disclosure
WordPress大学
WordPress大学
腾讯CDC
小众软件
小众软件
大猫的无限游戏
大猫的无限游戏
D
DataBreaches.Net
SecWiki News
SecWiki News
L
Lohrmann on Cybersecurity
I
InfoQ
MyScale Blog
MyScale Blog
量子位
Cyberwarzone
Cyberwarzone
博客园 - 三生石上(FineUI控件)
The Hacker News
The Hacker News
F
Fortinet All Blogs
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Jina AI
Jina AI
博客园_首页
H
Help Net Security
K
Kaspersky official blog
酷 壳 – CoolShell
酷 壳 – CoolShell
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
www.infosecurity-magazine.com
www.infosecurity-magazine.com
Webroot Blog
Webroot Blog
Blog — PlanetScale
Blog — PlanetScale
V
Vulnerabilities – Threatpost
Y
Y Combinator Blog
The Cloudflare Blog
P
Proofpoint News Feed
V
Visual Studio Blog
C
Cyber Attacks, Cyber Crime and Cyber Security
T
Tailwind CSS Blog
爱范儿
爱范儿
P
Privacy International News Feed
Security Archives - TechRepublic
Security Archives - TechRepublic
The GitHub Blog
The GitHub Blog
C
Cybersecurity and Infrastructure Security Agency CISA
B
Blog RSS Feed

博客园 - 踏踏实实干

asp.net MVC4 框架揭秘 读书笔记系列3 asp.net MVC4 框架揭秘 读书笔记系列2 asp.net MVC4 框架揭秘 读书笔记系列1 什么?你还不会写JQuery 插件 jQuery命名空间,插件开发 微信开发资源 jstree 从简单说起Jquery 插件应用说明 sync framework参考收集系列 收集一些.net 组件开发资源 (转) c# 调用SQL Server存储过程返回值(转) C#事务 访问数据库(转) 多库查询 sp_addlinkedserver使用方法(添加链接服务器)(转)片段整理 asp.net 动态数据网站简单应用,快速建立站点实现对库方便的增删改 利用asp.net路由实现url解析 智能客户端(Smart Client )中文文档及案例(转贴) 利用反射对对象属性赋值取值操作 男人30而立,30岁的男人喊起来!你们立了吗? asp.net 造成seesion 丢失的问题之一 转摘 JQUERY操作JSON例子
jquery 实现从左边listbox选择至右边listbox
踏踏实实干 · 2012-02-06 · via 博客园 - 踏踏实实干

经常在项目中会用到从左边文本框选择数据至右边文本框,现将关键jquery 代码 与各位分享

/* source*/
            $("#source li").each(function() {
                $(this).append("<img src=\"../Images/target_flg.png\" class=\"imgstyle\" />");
                $("#source li img").show();

            });

            $("#source li").unbind("click").bind("click", function() {
                $(this).toggleClass("selectItem");
                if ($(this).attr("class") == "selectItem") {
                    $(this).find("img").hide();
                }
                else {
                    $(this).find("img").show();
                }
            });

            $("#source li img").mousemove(function() {
                $(this).css("cursor", "pointer");
                $("#lifeEventToolTips").css({ top: $(this).offset().top + 5, left: $(this).offset().left + 5 });
                $("#lifeEventToolTips").html($(this).parent().attr("tips"));
                $("#lifeEventToolTips").show();
            });

            $("#source li img").mouseout(function() {
                $("#lifeEventToolTips").hide();
            });

            /*target*/
            $("#target li").each(function() {
                $(this).append("<img src=\"../Images/target_flg.png\" class=\"imgstyle\" />");
                $("#target li img").hide();
            });

            $("#target li").unbind("click").bind("click", function() {
                $(this).toggleClass("selectItem");
            });

            $("#target li img").mousemove(function() {
                $("#lifeEventToolTips").css({ top: $(this).offset().top, left: $(this).offset().left });
                $("#lifeEventToolTips").html($(this).parent().attr("tips"));
                $("#lifeEventToolTips").show();
            });

            $("#target li img").mouseout(function() {
                $("#lifeEventToolTips").hide();
            });

            //btnEvent
            $("#add").click(function() {
                $("#target li").removeClass();
                $("#source li.selectItem").appendTo("#target");
                $("#target li img").hide();
                $("#target li").unbind("click").bind("click", function() {
                    $(this).toggleClass("selectItem");
                });
                GetGroups();
            });

            $("#remove").click(function() {
                $("#source li").removeClass();
                $("#source li img").show();
                $("#target li.selectItem").appendTo("#source");
                $("#source li").unbind("click").bind("click", function() {
                    $(this).toggleClass("selectItem");
                    if ($(this).attr("class") == "selectItem") {
                        $(this).find("img").hide();
                    }
                    else {
                        $(this).find("img").show();
                    }
                });
                GetGroups();
            });

html

<table width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td style="padding-top: 30px; width: 40%;">
                            <span class="targetspanstyle">Available Groups</span>
                            <div class="divborderstyle">
                                <ul id="source">
                                    <asp:Repeater ID="repSourceLifeEvent" runat="server">
                                        <ItemTemplate>
                                            <li id="<%#Eval("typeName") %>" tips=" <%#Eval("KeyWord"%>">
                                                <%#Eval("Description"%></li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                            <div id="lifeEventToolTips" style="">
                            </div>
                        </td>
                        <td style="padding-top: 30px; width: 20%;">
                            <div style="margin-bottom: 10px;">
                                <img id="add" src="../images/btn_add.gif" alt="add" style="cursor: hand" /></div>
                            <div>
                                <img id="remove" src="../images/btn_remove.gif" alt="remove" style="cursor: hand" /></div>
                        </td>
                        <td style="padding-top: 30px; width: 40%;">
                            <span class="targetspanstyle">Target Groups</span>
                            <div class="divborderstyle">
                                <ul id="target">
                                    <asp:Repeater ID="repTargetLifeEvent" runat="server">
                                        <ItemTemplate>
                                            <li id="<%#Eval("typeName") %>" tips=" <%#Eval("KeyWord"%>">
                                                <%#Eval("Description"%></li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </table>

两边待选项可以后台绑定