zoukankan      html  css  js  c++  java
  • jQuery---城市选择案例

    城市选择案例

    <!DOCTYPE html>
    <html>
    
    <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style>
        select {
          width: 200px;
          background-color: #fff;
          height: 200px;
          font-size: 20px;
        }
    
        .btn-box {
          width: 30px;
          display: inline-block;
          vertical-align: top;
        }
      </style>
    </head>
    
    <body>
      <h1>城市选择:</h1>
      <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="btn1"> &gt;&gt; </button>
        <button id="btn2"> &lt;&lt; </button>
        <button id="btn3"> &gt;</button>
        <button id="btn4"> &lt; </button>
      </div>
      <select id="tar-city" name="tar-city" multiple>
      </select>
    
      <script src="jquery-1.12.4.js"></script>
      <script>
    
        $(function () {
          $("#btn1").click(function () {
            $("#src-city>option").appendTo("#tar-city");
          });
    
          $("#btn2").click(function () {
            $("#tar-city>option").appendTo("#src-city");
          });
    
          $("#btn3").click(function () {
            $("#src-city>option:selected").appendTo("#tar-city");
          });
    
          $("#btn4").click(function () {
            //这里用append
            $("#src-city").append($("#tar-city>option:selected"));
          });
        });
    
      </script>
    
    </body>
    
    
    
    
    </html>

  • 相关阅读:
    Halcon二维仿射变换实例探究
    redis主从+哨兵实战
    单点安装redis+哨兵
    一个学习技术不错的网站
    reset master 不能乱用呀
    MySQL 5.7基于GTID的主从复制实践
    『浅入深出』MySQL 中事务的实现
    使用二进制包安装mysql
    jenkins+gitlab
    mysql的Innodb存储引擎提一嘴
  • 原文地址:https://www.cnblogs.com/jane-panyiyun/p/12212694.html
Copyright © 2011-2022 走看看