代码：

<!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. 如何在 webpack 项目中使用绝对路径

    react 小白编程 本项目是使用 create-react-app 脚手架构建的react项目 找到 config 配置文件下的 webpack.config.dev.js 和 webpack.co ...

  2. Java知识总结---整合SpringMVC+Mybatis+Spring（二）

    在如今的Java Web开发过程中,各种各样框架层出不穷.在工作中,框架的使用也越来越频繁. 今天介绍一下如今比較流行的SpringMVC.Mybatis和Spring框架.学习一下怎样在项目中使用它 ...

  3. Qt Quick综合实例之文件查看器

    假设你基于Qt SDK 5.3.1来创建一个Qt Quick App项目,项目模板为你准备的main.qml文档的根元素是ApplicationWindow或Window.这次我们就以Applicat ...

  4. BestCoder Round #60/HDU 5505 暴力数学

    GT and numbers 问题描述 给出两个数NN和MM. NN每次可以乘上一个自己的因数变成新的NN. 求最初的NN到MM至少需要几步. 如果永远也到不了输出-1−1. 输入描述 第一行读入一个 ...

  5. Robot Framework 使用技巧 快捷键

        ctrl+alt+space 自动带出相关关键字,以及相关用法,里边有对应参数的说明. Ctrl+鼠标悬浮 直接显示关键字的相关用法 F5 关键字说明 (方法名函数名)             ...

  6. Linux下的IPC－UNIX Domain Socket【转】

    本文转载自:http://blog.csdn.net/guxch/article/details/7041052 一. 概述 UNIX Domain Socket是在socket架构上发展起来的用于同 ...

  7. ajax异步文件上传和进度条

    一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...

  8. MSP430：输入捕获

    在做超声模块时用到 //捕获上升沿 void Capture_Pos(void) { P2SEL |= Echo; //选择P23作为捕捉的输入端子 Timer1_A //TA1CCTL1 |=CM_ ...

  9. Dsp和ARM的区别

    有一次上课老师在将ARM的时候说到了Dsp. Dsp(Digital Signal Process),数字信号处理技术,而Dsp芯片和ARM的结构也有很多相似之处.比如有流水线.采用哈佛结构(早期的A ...

  10. 关于postman软件的安装与使用

    1.这个软件是一个模拟发请求的软件 2.这个软件和这个网站的 json 格式数据有着很好的关系  https://www.json.cn/ 他能帮助我们分解代码, 3.在使用(修改的)过程中发现了一个 ...