js——4商品左右选择

Posted wml2018

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js——4商品左右选择相关的知识，希望对你有一定的参考价值。

商品左右选择

<!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
//                alert(options.length);
                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()">
                            <!--// ondblclick="selectOne()"可以让单击元素-->
                            <option>华为</option>
                            <option>小米</option>
                            <option>锤子</option>
                            <option>oppo</option>
                        </select>
                        <br />
                        <a href="#" onclick="selectOne()"> &gt;&gt; </a> <br />
                        <!--&gt是大于号的标记-->
                        <a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a>
                    </div>
                    <!--右边-->
                    <div style="float: right;"> 
                        未有商品<br />
                        <select multiple="multiple" id="rightSelect">
                            <option>苹果6</option>
                            <option>肾7</option>
                            <option>诺基亚</option>
                            <option>波导</option>
                        </select>
                        <br />
                        <a href="#"> &lt;&lt; </a> <br />
                        <!--&lt是小于号的标记-->
                        <a href="#"> &lt;&lt;&lt; </a>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="提交"/>
                </td>
            </tr>
        </table>
        
        
    </body>
</html>

 

以上是关于js——4商品左右选择的主要内容，如果未能解决你的问题，请参考以下文章

jQuery应用实例4：下拉列表

JavaWeb04-HTML篇笔记

PHP.TP框架下商品项目的优化4-优化商品添加表单js

仿京东淘宝商品详情页属性选择js效果

如何用JS算出商品总价！

前端开发常用js代码片段