Jquery之选择器与方法综合练习

最新推荐文章于 2023-08-10 14:36:07 发布

broccoli2

最新推荐文章于 2023-08-10 14:36:07 发布

阅读量1.7k

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/broccoli2/article/details/76797566

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先创建test.html文件，内容如下：
这里用的jquery版本是jquery-1.8.2.js,

http://download.csdn.net/detail/broccoli2/9922753

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
    <div>   <!-- multiple表示可以多选 -->
        <select style="width:60px" multiple size="10" id="leftID">
            <option>选项A</option>
            <option>选项B</option>
            <option>选项C</option>
            <option>选项D</option>
            <option>选项E</option>
            <option>选项F</option>
            <option>选项G</option>
            <option>选项H</option>
            <option>选项I</option>
            <option>选项J</option>
        </select>
    </div>
    <div style="position:absolute;left:100px;top:60px">
        <input type="button" value="批量右移" id="rightMoveID"/>
    </div>
    <div style="position:absolute;left:100px;top:90px">
        <input type="button" value="全部右移" id="rightMoveAllID"/>
    </div>
    <div style="position:absolute;left:220px;top:20px"> 
        <select multiple size="10" style="width:60px" id="rightID">
        </select>
    </div>
  </body>

  <script type="text/javascript">

        //双击右移
        //定位左边的下拉框，同时添加双击事件
        $("#leftID").dblclick(function(){
            //获取双击时选中的option标签
            var $option = $("#leftID option:selected");
            //将选中的option标签移动到右边的下拉框中
            $("#rightID").append( $option );
        });

        //批量右移
        //定位批量右移按钮，同时添加单击事件
        $("#rightMoveID").click(function(){
            //获取左边下拉框中选中的option标签
            var $option = $("#leftID option:selected");
            //将选中的option标签移动到右边的下拉框中
            $("#rightID").append( $option );
        });     

        //全部右移
        //定位全部右移按钮，同时添加单击事件
        $("#rightMoveAllID").click(function(){
            //获取左边下拉框中所有的option标签
            var $option = $("#leftID option");
            //将选中的option标签移动到右边的下拉框中
            $("#rightID").append( $option );
        });

  </script>
</html>

broccoli2

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery之选择器与方法综合练习

首先创建test.html文件，内容如下：这里用的jquery版本是jquery-1.8.2.js, http://download.csdn.net/detail/broccoli2/9922753<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-e
复制链接

扫一扫