$("option:selected",this) 的使用

最新推荐文章于 2022-12-28 09:33:41 发布

原创最新推荐文章于 2022-12-28 09:33:41 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用JQuery进行元素操作的具体示例，包括如何通过点击按钮将选项从一个下拉列表移至另一个下拉列表，并支持双击操作。此示例展示了JQuery在DOM操作方面的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuer测试</title>
    <script language="javascript" src="jquery-1.3.1.js">
    </script>
   <style type="text/css">
* { margin:0; padding:0; }
div.centent {
   float:left;
   text-align: center;
   margin: 10px;
}
span {
   display:block;
   margin:2px 2px;
   padding:4px 10px;
   background:#898989;
   cursor:pointer;
   font-size:12px;
   color:white;
}
   </style>
<script type="text/javascript">
    $(function(){
        /*
        $("#add").click(function(){
            var $options = $("#select1 option:selected");
            var $remove = $options.remove();
           $remove.appendTo($("#select2"));
       });
       */
       $("#add").click(function(){
            $("#select1 option:selected").appendTo($("#select2"));
       });

       $("#add_all").click(function(){
            $("#select1 option").appendTo($("#select2"));
       });

       $("#select1 option").dblclick(function(){ //dblclick
           $(this).appendTo($("#select2"));
       });

       //another side

       $("#remove").click(function(){
            $("#select2 option:selected").appendTo($("#select1"));
       });

       $("#remove_all").click(function(){
            $("#select2 option").appendTo($("#select1"));
       });
        /*
       $("#select2 option").dblclick(function(){ //dblclick
           $(this).appendTo($("#select1"));
       });
       */


       $("#select2").dblclick(function(){
            $("option:selected",this).appendTo("#select1");
       });

   });
</script>
</head>
<body>
<div class="centent">
       <select multiple="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>
       </select>
       <div>
           <span id="add" >选中添加到右边>></span>
           <span id="add_all" >全部添加到右边>></span>
       </div>
   </div>

   <div class="centent">
       <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
           <option value="8">选项8</option>
       </select>
       <div>
           <span id="remove"><<选中删除到左边</span>
           <span id="remove_all"><<全部删除到左边</span>
       </div>
   </div>
</body>
</html>