首页 / WordPress函数讲解 / 利用js来控制下拉列表左右选择

利用js来控制下拉列表左右选择

    • 珂李斯

    发布于

    by

    在我们的分类管理中，我们要能够去修改我们的分类信息，当我们点击修改的时候，可以跳转到一个能编辑的页面，这里面能…

    在我们的分类管理中，我们要能够去修改我们的分类信息，当我们点击修改的时候，可以跳转到一个能编辑的页面，这里面能够修改分类的名称、分类的描述、以及分类的商品。

    技术分析

    ondblclick=”selectOne()”//双击事件

    multiple=”multiple”//select标签的属性

    代码实现：

    <!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>锤子</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>苹果6</option>

    <option>肾7</option>

    <option>诺基亚</option>

    <option>波导</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来控制下拉列表左右选择的详细内容，更多请关注网站的其它相关文章！

    利用js来控制下拉列表左右选择 (https://www.wpmee.com/) javascript教程 第1张

    类别：WordPress函数讲解、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！