zoukankan      html  css  js  c++  java

  • jquery城市选择案例

    1.代码实例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-jQuery-城市选择案例</title>
    <style type="text/css" media="screen">
        select {
             200px;
            background-color: teal;
            height: 200px;
            font-size: 20px;
        }
        .btn-box {
             30px;
            display: inline-block;
            vertical-align: top;
        }
    </style>
    <script src="jquery-1.11.3.js"></script>
    <script>
        // $(function(){
        //     $("#btn-sel-none").on('click',function(){
        //         $("#tar-city option").appendTo('#src-city');
        //     });

        //     $("#btn-sel-all").on('click',function(){
        //         $("#src-city option").appendTo('#tar-city');
        //     });
        //     $("#btn-sel").on('click',function(){
        //         $("#src-city option:selected").appendTo('#tar-city');
        //     });
        //     $("#btn-back").on('click',function(){
        //         $("#tar-city option:selected").appendTo('#src-city');
        //     });
        // });


        $(function(){
            $("#btn-sel-all").on('click',function(){
                //把所有的 城市从左边 移动到右边select中
                $("#src-city option").appendTo("#tar-city");
            });
            $("#btn-sel-none").on('click',function(){
                //把所有的 城市从左边 移动到右边select中
                $("#tar-city option").appendTo("#src-city");
            });
            $("#btn-sel").on('click',function(){
                //把所有的 城市从左边 移动到右边select中
                $("#src-city option:selected").appendTo("#tar-city");
            });

            $("#btn-back").on('click',function(){
                //把所有的 城市从左边 移动到右边select中
                $("#tar-city option:selected").appendTo("#src-city");
            });
        });
    </script>
</head>
<body>
     <select id="src-city" name="src-city" multiple>
         <option value="1">北京</option>
         <option value="2">上海</option>
         <option value="3">深圳</option>
         <option value="4">广州</option>
         <option value="5">西红柿</option>
     </select>
    <div class="btn-box">
        <button id="btn-sel-all"> &gt;&gt; </button>
        <button id="btn-sel-none"> &lt;&lt; </button>
        <button id="btn-back"> &lt; </button>
        <button id="btn-sel"> &gt;</button>
    </div>

     <select id="tar-city" name="tar-city" multiple>

     </select>
</body>
</html>

    2.实例截图
  • 相关阅读:
    關于招聘新人
    JS在线打字练习 PHP
    useragent 分析 PHP
    webSql工具 PHP
    《网站开发人员应该知道的61件事》[解读] PHP
    HTMLCSS速查 PHP
    Flash文字转图片 PHP
    Flash简易文件上传 PHP
    Google 字体 API PHP
    Google 二维条码 API PHP
  • 原文地址：https://www.cnblogs.com/mr-wuxiansheng/p/6363635.html
Copyright © 2011-2022 走看看