• jquery 双向选择插件select

    下面的代码是网络上的,有个问题,就是选择的一个项在从第二个向第一个移动时候不反应,非要鼠标移动到select控件上面时才有响应,该怎么改呢
    <!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=gb2312" />
    <title>demo</title>
    <script src="http://localhost/new/res/jquery.js" type="text/javascript"></script>
    <script>
    <!--
    $(    function(){
    $(    "#s1 option:first,#s2 option:first").attr("selected",true);

    $(    "#s1").dblclick(function(){
    $(    "option:selected",this).clone().appendTo("#s2");
    $(    "option:selected",this).remove();
    $(    "#s1 option:first,#s2 option:first").attr("selected",true);
    });

    $(    "#s2").dblclick(function(){
    $(    "option:selected",this).clone().appendTo("#s1");
    $(    "option:selected",this).remove();
    $(    "#s1 option:first,#s2 option:first").attr("selected",true);
    });

    $(    "#add").click(function(){
    $(    "#s1 option:selected").clone().appendTo("#s2");
    $(    "#s1 option:selected").remove();
    $(    "#s1 option:first,#s2 option:first").attr("selected",true);
    });

    $(    "#remove").click(function(){
    $(    "#s2 option:selected").clone().appendTo("#s1");
    $(    "#s2 option:selected").remove();
    $(    "#s1 option:first,#s2 option:first").attr("selected",true);
    });

    $(    "#addall").click(function(){
    $(    "#s1 option").clone().appendTo("#s2");
    $(    "#s1 option").remove();
    $(    "#s1 option:first,#s2 option:first").attr("selected",true);
    });

    $(    "#removeall").click(function(){
    $(    "#s2 option").clone().appendTo("#s1");
    $(    "#s2 option").remove();
    $(    "#s1 option:first,#s2 option:first").attr("selected",true);
    });

    $(    "#s1up").click(function(){
    var so = $("#s1 option:selected");
    if(so.get(0).index!=0){
      so.each(    function(){
      $(    this).prev().before($(this));
      });
    }
    });

    $(    "#s1down").click(function(){
    var alloptions = $("#s1 option");
    var so = $("#s1 option:selected");

    if(so.get(so.length-1).index!=alloptions.length-1){
          for(i=so.length-1;i>=0;i--)
      {
          var item = $(so.get(i));
      item.insertAfter(item.next());
      }
    }
    });

    $(    "#s2up").click(function(){
    var so = $("#s2 option:selected");
    if(so.get(0).index!=0){
      so.each(    function(){
      $(    this).prev().before($(this));
      });
    }
    });

    $(    "#s2down").click(function(){
    var alloptions = $("#s2 option");
    var so = $("#s2 option:selected");

    if(so.get(so.length-1).index!=alloptions.length-1){
          for(i=so.length-1;i>=0;i--)
      {
          var item = $(so.get(i));
      item.insertAfter(item.next());
      }
    }
    });
    });
    -->
    </script>
    </head>
    <body>
    <table width="288" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="29">
      <input type="button" name="s1up" id="s1up" value="↑" /><br />
      <input type="button" name="s1down" id="s1down" value="↓" /></td>
      <td width="100"><select name="s1" size="10" multiple="multiple" id="s1" style=" 100px;">
      <option value="opt01">option01</option>
      <option value="opt02">option02</option>
      <option value="opt03">option03</option>
      <option value="opt04">option04</option>
      <option value="opt05">option05</option>
      <option value="opt06">option06</option>
      <option value="opt07">option07</option>
      <option value="opt08">option08</option>
      <option value="opt09">option09</option>
      <option value="opt10">option10</option>
      </select></td>
      <td width="37" align="center"><input type="button" name="addall" id="addall" value=">|" /><br /><input type="button" name="add" id="add" value=">>" /><br /><input type="button" name="remove" id="remove" value="<<" /><br /><input type="button" name="removeall" id="removeall" value="|<" /></td>
      <td width="100"><select name="s2" size="10" multiple="multiple" id="s2" style=" 100px;">
      </select></td>
      <td width="119">
      <input type="button" name="s2up" id="s2up" value="↑" /><br />
      <input type="button" name="s2down" id="s2down" value="↓" /></td>
    </tr>
    </table>
    <p>支持直接双击添加/删除，上下(支持间隔)排序</p>

    </body>
    </html>
  • 相关阅读:
    模糊查询三种解决方式
    trim标签&&MyBatis内置参数
    ResultMap&&鉴别器&&别名
    增加null&&使用HashMap存储查询结果集
    MyBatis处理多个参数问题
    SpringCloud中使用Zuul实现路由网关
    SpringCloud分布式config配置中心
    FeignClient的参数传递给服务提供方的方式（简单数据类型、对象）
    Hystrix的使用实例***
    什么是缓存穿透、缓存击穿
  • 原文地址：https://www.cnblogs.com/chengulv/p/2223609.html
Copyright © 2020-2023  润新知