2021-05-18

一、移动拉框

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：vs JQ

作者： 龚紫康

撰写时间：2021年5月8日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

一、项目组成

移动拉框是由三个部分组成，分别为两个select标签和input组成代码如下：

内容讲解：

首先，给他一个select下拉框，select标签中添加一个multiple属性，multiple 属性规定可同时选择多个选项。

在不同操作系统中，选择多个选项的差异：

• 对于 windows：按住 Ctrl 按钮来选择多个选项
• 对于 Mac：按住 command 按钮来选择多个选项

由于上述差异的存在，同时由于需要告知用户可以使用多项选择，对用户更友好的方式是使用复选框。

提示：可以把 multiple 属性与 size 属性配合使用，来定义可见选项的数目。

 

初始状态如图：

 

图1

然后给input添加button属性，通过点击input标签将选中的内容移动到另一个select标签中；

实现效果如图：

 

图2

二、Js讲解

<script>

        $(function () {

            //$(":selected")

           //为所有的按钮绑定点击事件

            $("#b1").click(function () {

// $("#b1")获取到按钮的id绑定点击事件

                $("#select2").append($("#select1 :selected"));

//：selected所有的下拉框内容

                // 利用append（）方法给$("#select2")添加$("#select1 :selected")内容；

});

            $("#b2").click(function () {

                $("#select2").append($("#select1 option"));

                //：option选中的下拉框内容

// 利用append（）方法给$("#select2")添加$("#select1 : option ")内容；

            });

            $("#b3").click(function () {

                $("#select1").append($("#select2 :selected"));

            });

            $("#b4").click(function () {

                $("#select1").append($("#select2 option"));

            });

        });

</script>

 

selected 属性可设置或返回选项的 selected 属性的值。该属性设置选项的当前状态，如果为 true，则该选项被选中。该属性的初始值来自 <option> 的 selected 属性。