jQuery应用实例4：下拉列表

Posted xuyiqing

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery应用实例4：下拉列表相关的知识，希望对你有一定的参考价值。

应用场景：左侧是已有商品，右侧是未有商品，选择其中的内容点击箭头即可互换：

点击大箭头则全部内容去另一边，或者双击已有商品的选项也会加入右边：

技术分享图片

 

代码实现：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>下拉列表左右选择</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script>
            $(function() {
                /*1.选中单击去右边*/
                $("#selectOneToRight").click(function() {
                    $("#left option:selected").appendTo($("#right"));
                });

                /*2.单击全部去右边*/
                $("#selectAllToRight").click(function() {
                    $("#left option").appendTo($("#right"));
                });

                /*3.选中双击去右边*/
                $("#left option").dblclick(function() {
                    $("#left option:selected").appendTo($("#right"));
                });

                $("#selectOneToLeft").click(function() {
                    $("#right option:selected").appendTo($("#left"));
                });

                $("#selectAllToLeft").click(function() {
                    $("#right option").appendTo($("#left"));
                });

                $("#right option").dblclick(function() {
                    $("#right option:selected").appendTo($("#left"));
                });
            });
        </script>

    </head>

    <body>
        <table border="1" width="600" align="center">
            <tr>
                <td>
                    分类名称
                </td>
                <td>
                    <input type="text" name="cname" value="手机数码" />
                </td>
            </tr>
            <tr>
                <td>
                    分类描述
                </td>
                <td>
                    <textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
                </td>
            </tr>
            <tr>
                <td>
                    分类商品
                </td>
                <td>
                    <span style="float: left;">
                        <font color="green" face="宋体">已有商品</font><br/>
                        <select multiple="multiple" style="width: 100px;height: 200px;" id="left">
                            <option>IPhone6s</option>
                            <option>小米4</option>
                            <option>锤子T2</option>
                        </select>
                        <p><a href="#" style="padding-left: 20px;" id="selectOneToRight">&gt;&gt;</a></p>
                        <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">&gt;&gt;&gt;</a></p>
                    </span>
                    <span style="float: right;">
                        <font color="red" face="宋体">未有商品</font><br/>
                        <select multiple="multiple" style="width: 100px;height: 200px;" id="right">
                            <option>三星Note3</option>
                            <option>华为6s</option>
                        </select>
                        <p><a href="#" id="selectOneToLeft">&lt;&lt;</a></p>
                        <p><a href="#" id="selectAllToLeft">&lt;&lt;&lt;</a></p>
                    </span>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type=‘submit‘ value="修改" />
                </td>
            </tr>
        </table>
    </body>

</html>

 

以上是关于jQuery应用实例4：下拉列表的主要内容，如果未能解决你的问题，请参考以下文章

用jquery设置下拉不可编辑，但是没起作用，求高手指点，急。。。

如何使用 JSON 数据填充下拉列表作为 jQuery 中的 ajax 响应

jquery怎么设置下拉列表被选中

根据下拉列表的值隐藏和显示一行表格 - jquery

如何在 IOS 6.0(Iphone) 中通过 jquery 为混合应用程序关闭选择器的 onchange 事件下拉列表

web前端开发JQuery常用实例代码片段(50个)