Jquery——城市选择

最新推荐文章于 2021-05-17 16:54:59 发布

Zjaun

最新推荐文章于 2021-05-17 16:54:59 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQ 文章标签： JQuery

本文链接：https://blog.youkuaiyun.com/Zjaun/article/details/87215214

JQ 专栏收录该内容

15 篇文章

订阅专栏

这篇博客主要介绍了如何使用Jquery来实现城市选择的功能，包括css样式的设定、控件的构建以及多选功能的编写。

css样式

 <style>
    select {
      width: 200px;
      background-color: teal;
      height: 200px;
      font-size: 20px;
    }

    .btn-box {
      width: 30px;
      display: inline-block;
      vertical-align: top;
    }
  </style>

控件

  <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 () {
        $("#src-city").append($("#tar-city>option"));
      });
      $("#btn3").click(function () {
        $("#src-city>option:selected").appendTo("#tar-city");
      });
      $("#btn4").click(function () {
        $("#src-city").append($("#tar-city>option:selected"));
      });
    });
  </script>

在这里插入图片描述
可以点击单选或按住ctrl进行多选