当前位置：移动技术网 > IT编程>开发语言>Jquery > 使用JQuery完成下列列表左右选择

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

2020年05月07日 | 移动技术网IT编程 | 我要评论

使用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>