基于jQuery实现下拉框,Jquery多选框互相内容交换
分类:新闻中心

复制代码 代码如下:

<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          
            // 把选择项追加给对方
            $('#add').click(function(){
            var options=$('#select1 option:selected');
            var remove=options.remove();
            remove.appendTo("#select2");
            });
       
            // 把所有项追加给对方
            $('#addAll').click(function(){
            var options=$('#select1 option');
            var remove=options.remove();
            remove.appendTo("#select2");
            });
          
            // 把选择项退回给对方
            $('#remove').click(function(){
            var options=$('#select2 option:selected');
            var remove=options.remove();
            remove.appendTo("#select1");
            });
          
            // 把全部项退回给对方
            $('#removeAll').click(function(){
            var options=$('#select2 option');
            var remove=options.remove();
            remove.appendTo("#select1");
            });
                
        });
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div id="left">
        <select multiple="multiple" id="select1" style="width:100px;height:160px">
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option>选项4</option>
        <option>选项5</option>
        </select>
    </div>
    <div>
        <span id="add">选中项添加至右边>></span><br />
        <span id="addAll">全部添加到右边>></span>
    </div>
  
    <div id="right">
        <select multiple="multiple" id="select2" style="width:100px;height:160px"></select>
    </div>
    <div>
        <span id="remove"><<选中项还原至左边</span><br />
        <span id="removeAll"><<全部还原至左边</span>
    </div>
    </form>
</body>

项目中经常会遇到下拉框,在扁平化和响应式布局大行其道的今天,使用jQuery来实现下拉框就十分的必要了,而且也会美观很多,这里就给大家推荐一段基于jQuery的下拉框代码。

<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // 把选择项追加给对方
            $('#add').click(function(){
            var options=$('#select1 option:selected');
            var remove=options.remove();
            remove.appendTo("#select2");
            });
            // 把所有项追加给对方
            $('#addAll').click(function(){
            var options=$('#select1 option');
            var remove=options.remove();
            remove.appendTo("#select2");
            });
            // 把选择项退回给对方
            $('#remove').click(function(){
            var options=$('#select2 option:selected');
            var remove=options.remove();
            remove.appendTo("#select1");
            });
            // 把全部项退回给对方
            $('#removeAll').click(function(){
            var options=$('#select2 option');
            var remove=options.remove();
            remove.appendTo("#select1");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="left">
        <select multiple="multiple" id="select1" style="width:100px;height:160px">
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option>选项4</option>
        <option>选项5</option>
        </select>
    </div>
    <div>
        <span id="add">选中项添加至右边>></span><br />
        <span id="addAll">全部添加到右边>></span>
    </div>
    <div id="right">
        <select multiple="multiple" id="select2" style="width:100px;height:160px"></select>
    </div>
    <div>
        <span id="remove"><<选中项还原至左边</span><br />
        <span id="removeAll"><<全部还原至左边</span>
    </div>
    </form>
</body>

摘自 徐越的专栏

jQuery代码:

您可能感兴趣的文章:

  • jQuery获取复选框被选中数量及判断选择值的方法详解
  • 简单实现jQuery多选框功能
  • jQuery中实现prop()函数控制多选框(全选,反选)
  • jQuery 获取多选框的值及多选框中文的函数
  • jquery中表单 多选框的一种巧妙写法
  • jQuery实现的多选框多级联动插件
  • jQuery对下拉框,单选框,多选框的操作
  • jquery对单选框,多选框,文本框等常见操作小结
  • jquery select多选框的左右移动 具体实现代码
  • jQuery多选框选择数量限制方法

runat=server title无标题页/title script type=text/javascript src=js/jquery-1.4.2.min.js/script script type=text/javascript $(document).ready(function(){ // 把选择项追加...

复制代码 代码如下:

        $(function(){
            $('#add').click(function(){
                var $options = $('#select1 option:selected');
                $options.appendTo("#select2");
            });
            $('#remove').click(function(){
                var $options = $('#select2 option:selected');
                $options.appendTo("#select1");
            });
            $('#add_all').click(function(){
                var $options = $('#select1 option');
                $options.appendTo("#select2");
            });
            $('#remove_all').click(function(){
                var $options = $('#select2 option');
                $options.appendTo("#select1");
            });
            $('#select1').dblclick(function(){
               var $options = $("option:selected",this); //获取选中的选项
                $options.appendTo('#select2');
            });
            $('#select2').dblclick(function(){
                var $options = $("option:selected",this); //获取选中的选项
                $options.appendTo('#select1');
            });
        });

HTML代码:

复制代码 代码如下:

   <div style="width: 250px">
   <div class="content" style="float: left">
       <select multiple id="select1" style="width: 100px;height: 160px;">
           <option value="1">选项1</option>
           <option value="2">选项2</option>
           <option value="3">选项3</option>
           <option value="4">选项4</option>
           <option value="5">选项5</option>
           <option value="6">选项6</option>
           <option value="7">选项7</option>
           <option value="8">选项8</option>
       </select>
       <div>
           <span id="add">选中添加到右边>></span><br>
           <span id="add_all">全部添加到右边>></span>
       </div>
   </div>
   <div style="float: right;">
       <select multiple id="select2" style="width: 100px;height: 160px;">
       </select>
       <div>
           <span id="remove"><<选中删除到左边</span><br>
           <span id="remove_all"><<全部删除到左边</span>
       </div>
   </div>
</div>

是不是很简单?小伙伴们需要的话直接就可以拿到项目中使用了。

您可能感兴趣的文章:

  • 基于jquery的网页SELECT下拉框美化代码
  • jQuery获取(选中)单选,复选框,下拉框中的值
  • jquery取消选择select下拉框示例代码
  • jQuery实现下拉框左右选择的简单实例
  • JQuery下拉框应用示例介绍
  • 一个简单的jquery的多选下拉框(自写)
  • 基于jquery实现的可编辑下拉框实现代码
  • jQuery制作简洁的多级联动Select下拉框
  • jQuery+easyui中的combobox实现下拉框特效
  • JQuery select(下拉框)操作方法汇总
  • jQuery实现下拉框选择图片功能实例
  • jquery实现select下拉框美化特效代码分享
  • jQuery下拉美化搜索表单效果代码分享

本文由美高梅网址发布于新闻中心,转载请注明出处:基于jQuery实现下拉框,Jquery多选框互相内容交换

上一篇:自动播放代码,自动播放的实例代码 下一篇:没有了
猜你喜欢
热门排行
精彩图文