代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>商品的左右选择</title>

    <!--

        步骤分析

            1. 确定事件: 点击事件 :onclick事件

            2. 事件要触发函数 selectOne

            3. selectOne要做一些操作

                (将左边选中的元素移动到右边的select中)

                1. 获取左边Select中被选中的元素

                2. 将选中的元素添加到右边的Select中即可

    -->

    <script>

        function selectOne() {

            //1. 获取左边Select中被选中的元素

            var leftSelect = document.getElementById("leftSelect");

            var options = leftSelect.options;

            //找到右侧的Select

            var rightSelect = document.getElementById("rightSelect");

            //遍历找出被选中的option

            for (var i = 0; i < options.length; i++) {

                var option1 = options[i];

                if (option1.selected) {

                    //2. 将选中的元素添加到右边的Select中即可

                    rightSelect.appendChild(option1);

                }

            }

        }

        //将左边所有的商品移动到右边

        function selectAll() {

            //1. 获取左边Select中被选中的元素

            var leftSelect = document.getElementById("leftSelect");

            var options = leftSelect.options;

            //找到右侧的Select

            var rightSelect = document.getElementById("rightSelect");

            //遍历找出被选中的option

            for (var i = options.length - 1; i >= 0; i--) {

                var option1 = options[i];

                rightSelect.appendChild(option1);

            }

        }

    </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" ondblclick="selectOne()">

                    <option>华为</option>

                    <option>小米</option>

                    <option>vivo</option>

                    <option>oppo</option>

                </select>

                <br/>

                <a href="#" onclick="selectOne()"> &gt;&gt; </a> <br/>

                <a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a>

            </div>

            <!--右边-->

            <div style="float: right;">

                未有商品<br/>

                <select multiple="multiple" id="rightSelect">

                    <option>苹果5</option>

                    <option>苹果6</option>

                    <option>苹果7</option>

                    <option>苹果8</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>

JS练习：商品的左右选择的更多相关文章

  1. 微信小程序实战篇：商品属性联动选择（案例）

    本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示:   商品属性联动.gif 代码示例 1.commodity.xml <!-- < ...

  2. JAVAEE——宜立方商城03：商品类目选择、Nginx端口或域名区分虚拟机、Nginx反向代理、负载均衡、keepalived实现高可用

    1. 学习计划 第三天: 1.商品类目选择(EasyUI的tree实现) 2.图片上传 a) 图片服务器FastDFS(Nainx部分) 2. 商品类目选择 2.1. 原型 2.2. 功能分析 展示商 ...

  3. Vue实现仿淘宝商品详情属性选择的功能

    Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下:   attrA ...

  4. js实现商品颜色尺码联动以及购买数量的选择

    <script type="text/javascript"> $(function(){ //初始化点击第一个颜色 jquery $("#colors a: ...

  5. 商品sku规格选择效果，没有商品的不能选中，选择顺序不影响展示结果

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  6. 010商城项目：商品类目的选择——Dao,Service.Action层的分析

    我们现在开始写商品类选择这个功能: 先看效果: 当我们点击"新增商品"---->"选择目录"然后从数据库中查出来数据并显示了. 我们分析数据库的那张表: ...

  7. 纯JS实现中国行政区域上下联动选择地址

    一.实现目的: 如标题所述,通过JS来实现地址的选取,上一篇博客介绍的方式是通过java读取txt资源文件来实现地址的选择,通过ajax方式访问服务器实现省市区联动.此篇中将介绍如何使用JS实现相同功 ...

  8. JS实现日历控件选择后自动填充

    最近在做人事档案的项目,在做项目的初期对B/S这块不是很熟悉,感觉信心不是很强,随着和师哥同组人员的交流后发现,调试程序越来越好了,现在信心是倍增,只要自己自己踏实的去研究.理解代码慢慢的效果就出来了 ...

  9. js移动端/H5同时选择多张图片上传并使用canvas压缩图片

    最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...

随机推荐

  1. 3.1 The Interpolating Polynomial（站点）

    Cubic Interpolation:                               https://www.youtube.com/watch? v=EtzlEA9MIwI Quad ...

  2. Server Tomcat v8.0 Server at localhost failed to start.

    怎么办? 查资料的话别人会告诉你须要删除一个东西.这是一种方法.可是你的错误并不是通过这种方法能够解决. 比方像我 <url-pattern>login</url-pattern&g ...

  3. Qt 开发程序后的公布问题

    Qt 开发程序后的公布问题 Qt 是一套跨平台 C++ 图形用户界面应用程序开发框架,利用它能够很方便的开发各种类型的应用程序.可是随着 Qt 的发展.功能越来越强大,公布时须要文件也越来越多.公布时 ...

  4. NYOJ_58最少步数(queue+BFS)

    描写叙述 这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1  1,0,0,1,0,0,1,0,1  1,0,0,1,1,0,0,0,1  1,0,1,0,1,1,0,1,1   ...

  5. 深圳MPD大会 讲师演讲稿 2014-10

     深圳MPD大会 讲师演讲稿 2014-10  互联网下的蛋-姜志辉.pdf: http://www.t00y.com/file/76704370 俞炜-互联网研发整形术 终于版.pdf: htt ...

  6. [C]if (CONDITION)语句中CONDITION的情况

    编译环境: Ubuntu 12.04: gcc Windows XP : VS-2005 深入一下if (CONDITION)语句中CONDITION的情况.即CONDITION何时为真,何时是假. ...

  7. oc75--不可变字典NSDictionary

    // // main.m // NSDictionary // // #import <Foundation/Foundation.h> int main(int argc, const ...

  8. 2-sat总结

    算法 构造一个有向图G,每个变量xi拆成两个点2i和2i+1 分别表示xi为假,xi为真 那么对于“xi为真或xj为假”这样的条件 我们就需要连接两条边 2*i —>2*j(表示如果i为假,那么 ...

  9. PHP富文本编辑器 之Kindeditor的使用 一

    一.下载编辑器源码 KindEditor 4.1.10 (2013-11-23) [1143KB] 下载页面: http://kindeditor.net/down.php 二.部署编辑器 将下载文件 ...

  10. Elasticsearch之CURL命令的UPDATE

    对于,Elasticsearch之CURL命令的UPDATE包括局部更新和全部更新.可以去看我写的另一篇博客. Elasticsearch之更新(全部更新和局部更新) 总结: ES全部更新,使用PUT ...