代码：

<!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. ORA-00904：&quot;T1&quot;.&quot;AREA_ID&quot; :标识符无效

    1.错误描写叙述 ORA-00904:"T1"."AREA_ID" :标识符无效 00904 . 00000 - "%s:invalid identi ...

  2. 应用程序无法正常启动 0xc0000013 vs2013

    今天下午切换到Windows 优化代码,在debug 的时候一直出现这个问题,折腾了很久,发现原来是系统环境变量的问题,我之前装了双系统,讲原来win7 下的一块E盘删掉做了Linux 盘,而系统环境 ...

  3. Android连接热点的Socket文件传输

    最近把测试丢过来的种种BUG解决后,终于有时间去研究研究Socket通信,再加上以前做的WiFi连接和热点开启,于是有了现在的这篇博文:创建热点发送文件,让另一台手机连接热点接收文件. 效果图: 两台 ...

  4. Python猜年龄

    题目:Python实现猜年龄 步骤一:实现最简单的猜年龄 # 事先定义 dark_knight_age = 28 user_age = input('Please guess my age:') us ...

  5. JSP-Runoob：JSP 生命周期

    ylbtech-JSP-Runoob:JSP 生命周期 1.返回顶部 1. JSP 生命周期 理解JSP底层功能的关键就是去理解它们所遵守的生命周期. JSP生命周期就是从创建到销毁的整个过程,类似于 ...

  6. 使用psutil模块获取电脑运行信息

    psutil是python的一个用于获取cpu信息的模块,非常好使,以下附上官方的一些example: CPU-> Examples >>> import psutil > ...

  7. php排序函数测试

    1.sort,asort,arsort函数 十万个数的数组排序,用了0.17秒 $starttime=explode(' ',microtime());;for ($i=0; $i <10000 ...

  8. IOC框架---什么是IOC

    1 IoC理论的背景    我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑.                    ...

  9. html5: table表格与页面布局整理

    传统表格布局之table标签排版总结:   默认样式: <style> table { max-width: 800px; border-spacing: 2px; border-coll ...

  10. Codeforces 19E 树上差分

    思路: 先随便建出来一棵搜索树(图可能不连通?) 每一条非树边(剩下的边)和树边都可以构成一个环. 我们只看一个非树边和某些树边构成的这些环. 分成三种情况: 1.没有奇环  所有边都可以删 2.有一 ...