欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用JQuery完成下列列表左右选择

程序员文章站 2022-04-14 13:52:56
使用JQuery完成下列列表左右选择 Js相关技术 ​select下拉列表 ​multiple 允许多选 ​ondblclick : 双击事件 ​for循环遍历,一边遍历一边移除出现的问题 需求分析 我们的商品通常包含已经有了的, 还有没有的,现在我们需要有一个页面用于动态编辑这些商品 步骤 ......

使用jquery完成下列列表左右选择

js相关技术

​ select下拉列表
​ multiple 允许多选
​ ondblclick : 双击事件
​ for循环遍历,一边遍历一边移除出现的问题

需求分析

我们的商品通常包含已经有了的, 还有没有的,现在我们需要有一个页面用于动态编辑这些商品

步骤分析

1. 导入jq的文件
2. 文档加载函数 :页面初始化
3.确定事件 : 点击事件 onclick
4. 事件触发函数
1. 移动被选中的那一项到右边

代码实现

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!--
        步骤:
            1. 导入jq的文件
            2. 文档加载函数 :页面初始化
            3.确定事件 : 点击事件 onclick
            4. 事件触发函数
                1. 移动被选中的那一项到右边
    -->
    <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
    <script>
        $(function(){
            $("#a1").click(function(){
                //找到被选中的那一项
                //将被选中项添加到右边
                $("#rightselect").append($("#leftselect option:selected"));
            });

            //将左边所有商品移动到右边
            $("#a2").click(function(){
                $("#rightselect").append($("#leftselect option"));
            });
        });
    </script>
</head>
<body>

<table border="1px" width="400px">
    <tr>
        <td>分类名称</td>
        <td><input type="text" value="手机数码"/></td>
    </tr>
    <tr>
        <td>分类描述</td>
        <td><input type="text" value="这里面都是手机数码"/></td>
    </tr>
    <tr>
        <td>分类商品</td>
        <td>
            <!--左边-->
            <div style="float: left;">
                已有商品<br />
                <select multiple="multiple" id="leftselect">
                    <option>华为</option>
                    <option>小米</option>
                    <option>锤子</option>
                    <option>oppo</option>
                </select>
                <br />
                <a href="#" id="a1" > &gt;&gt; </a> <br />
                <a href="#" id="a2"> &gt;&gt;&gt; </a>
            </div>
            <!--右边-->
            <div style="float: right;">
                未有商品<br />
                <select multiple="multiple" id="rightselect">
                    <option>苹果6</option>
                    <option>肾7</option>
                    <option>诺基亚</option>
                    <option>波导</option>
                </select>
                <br />
                <a href="#"> &lt;&lt; </a> <br />
                <a href="#"> &lt;&lt;&lt; </a>
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="submit" value="提交"/>
        </td>
    </tr>
</table>


</body>
</html>