代码：

<!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. 【POJ 2777】 Count Color

    [题目链接] http://poj.org/problem?id=2777 [算法] 线段树 [代码] #include <algorithm> #include <bitset&g ...

  2. SQL service 自动解决依赖包 验证

    依赖关系解决 ============================================================================================= ...

  3. AD9850驱动程序--MSP430版本

    前段时间忙着画板子搞运放搞滤波了,程序更新的少,发现MSP430不是太好用,尤其Timer,不过也与我使用内部晶振有关,产生正玄波之前用MSP430发出PWM,再进行滤波变为正弦波太麻烦了,这次改用D ...

  4. codevs 2541 幂运算(迭代加深搜索)

    2541 幂运算  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond     题目描述 Description 从m开始,我们只需要6次运算就可以计算出m31 ...

  5. Gym - 101982B 2018-2019 ACM-ICPC Pacific Northwest Regional Contest (Div. 1) B. Coprime Integers Mobius+容斥 ab间gcd(x,y)=1的对数

    题面 题意:给你 abcd(1e7),求a<=x<=b,c<=y<=d的,gcd(x,y)=1的数量 题解:经典题目,求从1的到n中选x,从1到m中选y的,gcd(x,y)=k ...

  6. [Apple开发者帐户帮助]六、配置应用服务（6）创建电子钱包标识符和证书

    电子钱包提供称为通行证的信息的数字表示- 例如优惠券,演出门票或登机牌 - 允许用户兑换真实世界的产品或服务.您可以通过多种方式使用电子钱包: 选项1:请求,分发和更新通行证 首先注册通行证类型标识符 ...

  7. 高德，百度，Google地图定位偏移以及坐标系转换

    一.在进行地图开发过程中,我们一般能接触到以下三种类型的地图坐标系: 1.WGS-84原始坐标系 一般用国际GPS纪录仪记录下来的经纬度,通过GPS定位拿到的原始经纬度,Google和高德地图定位的的 ...

  8. 【洛谷2257/BZOJ2820】YY的GCD（数论/莫比乌斯函数）

    题目: 洛谷2257 预备知识:莫比乌斯定理(懵逼乌斯定理) \(\mu*1=\epsilon\)(证bu明hui略zheng) 其中(我校学长把\(\epsilon(x)\)叫单位函数但是为什么我没 ...

  9. [ BZOJ 3038 & 3211 / SPOJ GSS4 ] 上帝造题七分钟2 / 花神游历各国

    \(\\\) \(Description\) 给出一个长度为\(N\)的数列,共进行\(M\)次操作: \(1\ L\ R\):查询\([L,R]\)区间和. \(2\ L\ R\):对\([L,R] ...

  10. 获取Google地图位置坐标并嵌入到网页

    有时候做网页的时候,可能需要一个地图显示,可能会用到Google地图,所以就分享一下get到的新技能.在网上查资料的时候有这种方式 但是我没做成功,所以找了其他的方式. 首先,打开Google地图,查 ...