代码：

<!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. SVN合并(merge)的使用

    使用svn几年了,一直对分支和合并敬而远之,一来是由于分支的管理不该我担心,二来即使涉及到分支的管理,也不敢贸然使用合并功能,生怕合并出了问题对团队造成不良影响.最基本的原因是,自己对分支的目的和合并 ...

  2. 【转载】java学习线路

    http://www.cnblogs.com/Leo_wl/p/5437059.html java基础(java编程思想) =>web开发(html/css/js  servlet/jsp 数据 ...

  3. c3p0-config.xml文件简单说明与备忘

    <?xml version="1.0" encoding="UTF-8"?> <c3p0-config> <named-confi ...

  4. cmd执行Java程序

    先创建一个文本,里面内容为 public class hello{ public static void main(String[] arg) { System.out.println("H ...

  5. 局部覆盖element-ui的默认样式

    最近项目中遇到的问题,只想在某个页面里面单独更改element-ui的样式,而不影响全局 有两种方法: 1.在需要更改的组件里新增一个style标签[重点:不要加scoped],然后直接获取class ...

  6. phpStorm更新后配置svn无法使用

    phpStorm迎来新的更新,结果之前配置的svn竟然无法使用啦,快捷键一类也没有作用.各种查找解决方案,最后找到解决方案.点击File找到Settings,找到Plugins这个部分,这个部分是管理 ...

  7. RabbitMQ死循环-延长ACK时间

    一.应用背景 今天做一个需求,要将RabbitMQ中的任务取出并执行,为防止任务执行期间出错,设置NO_ACK=FALSE标志,这样.一旦任务没有应答的话,相应的任务就会被RabbitMQ自动Re-Q ...

  8. Gson 转日期中的错误

    今天在用Gson做json转化是遇到一个问题,本地执行没有问题(windows 7),包丢到服务器上(Centos)就报错了. 后经分析发现DateTypeDapter类中取本地环境的日期格式参考ht ...

  9. NS2学习笔记（二）

    Tcl语言 变量和变量赋值 set a "Hello World!" #将字符串赋值给变量a puts "NS2 say $a" #输出字符串的内容,其中$a表 ...

  10. day02_12/12/2016_bean的实例化之普通工厂方式