jquery移动listbox的值

最新推荐文章于 2016-02-23 09:00:00 发布

原创最新推荐文章于 2016-02-23 09:00:00 发布 · 750 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery应用

Web前端专栏收录该内容

47 篇文章

订阅专栏

本文介绍了一个使用jQuery操作ListBox的示例，展示了如何通过按钮点击和双击事件将选项从一个ListBox移动到另一个ListBox。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE
 html PUBLIC "-//W3C//DTD
 XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html
 xmlns="http://www.w3.org/1999/xhtml"

>

<head>

    <meta
 http-equiv="Content-Type"

content="text/html;
 charset=UTF-8" 
/>

    <title>jQuery移动ListBox内容</title> 

    <meta
 name="copyright"

content="©http://hyipaying.com
 " 
/>

    <style
 type="text/css">

        h1{color:Green;}

        #listLeft{width:100px;}

        .normal{
 color:Blue; font-weight:bold; font-size:14px; background:#FF9933;

            width:
 95px;

        }

    </style>

    <script
 type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    

    <script
 type="text/javascript">

        $(document).ready(function()
 {

            //data

            var

vData = { "datalist":

            [

                {
"data":
"jQuery",
"text":
"jQuery"

},

                {
"data":
"Asp.net",
"text":
"Asp.net"

},

                {
"data":
"internet",
"text":
"internet"

},

                {
"data":
"Sql",
"text":
"Sql"

}

            ]

            };

            //bind
 data

            var

vlist = "";

            //遍历json数据

            jQuery.each(vData.datalist,
function(i,
 n) {

                vlist
 += "<option
 value=" 
+ n.data + ">"

+ n.text + "</option>";

            });

            //绑定数据到listLeft

            $("#listLeft").append(vlist);

            //right
 move

            $("#btnRight").click(function()
 {

                moveright();

            });

            //double
 click to move left

            $("#listLeft").dblclick(function()
 {

                moveright();

            });

            //left
 move 

            $("#btnLeft").click(function()
 {

                moveleft();

            });

            //double
 click to move right

            $("#listRight").dblclick(function()
 {

                moveleft();

            });

            function

moveright() {

                //数据option选中的数据集合赋值给变量vSelect

                var

vSelect = $("#listLeft
 option:selected");

                //克隆数据添加到listRight中

                vSelect.clone().appendTo("#listRight");

                //同时移除listRight中的option

                vSelect.remove();

            }

            function

moveleft() {

                var

vSelect = $("#listRight
 option:selected");

                vSelect.clone().appendTo("#listLeft");

                vSelect.remove();

            }

        });

    </script>

</head>

<body>

    <h1>jQuery移动ListBox内容</h1>

    <div
 style="width:240px;">

        <div
 style="width:100px;float:left;">

            <select
 size="4"

name="listLeft"

id="listLeft"

class="normal"

title="双击可实现右移">

            </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"

title="双击可实现左移">

            </select>

        </div>

    </div>

</body>

</html>