jquery做的下拉框应用

最新推荐文章于 2016-06-21 22:32:39 发布

yanliling0909

最新推荐文章于 2016-06-21 22:32:39 发布

阅读量1k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/yanliling0909/article/details/8589715

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="script/jquery-1.4.3.js"></script>
<script>
$(function(){

  $("#add").click(function(){
      var $options=$('#select1 option:selected'); //获取选中的选项
      var $remove=$options.remove(); //删除下拉列表中选中的选项
      $remove.appendTo('#select2');    //追加给对方  
      //追加和删除这两个步骤可以用appendTo()方法直接完成  所以可以简化为
     // $options.appendTo('#select2');
  });
  $("#add_all").click(function(){
      var $options=$('#select1 option');//获得全部的选项
      $options.appendTo('#select2');//追加给对方
  });
  //双击某个选项添加给对方
  $('#select1').dblclick(function(){
    //将选中的选项添加给对方
     var $options=$('#select1 option:selected');
      $options.appendTo('#select2')
  });
  
  $("#remove").click(function(){
        var $options=$('#select2 option:selected');
        $options.appendTo('#select1');
  });
   $("#remove_all").click(function(){
      var $options=$('#select2 option');//获得全部的选项
      $options.appendTo('#select1');//追加给对方
  });
  //双击某个选项添加给对方
  $('#select2').dblclick(function(){
    //将选中的选项添加给对方
     var $options=$('#select2 option:selected');
      $options.appendTo('#select1')
  });
});
</script>
</head>
<body>
<div class="content">
 <div>
  <select  multiple id="select1" style="position:relative;margin-top:110px;height:160px;width:80px;">
    <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>
  <div style="position:relative;margin-left:110px;margin-top:-110px">
     <input type="button" id="add" value=">" />
     <br/>
     <input type="button" id="add_all" value=">>" />
     <br/>
     <input type="button" id="remove" value="<" />
     <br/>
     <input type="button" id="remove_all" value="<<" />
  </div>
 <div>
  <select multiple id="select2" style="position:relative;margin-left:220px;margin-top:-145px;height:160px;width:80px">
  </select>
 </div>
</div>
</body>
</html>

yanliling0909

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery做的下拉框应用

$(function(){ $("#add").click(function(){ var $options=$('#select1 option:selected'); //获取选中的选项 var $remove=$options.remove(); //删除下拉列表中选中的选项 $remove.appendTo('#select2');
复制链接

扫一扫

专栏目录