javascript

位置:IT落伍者 >> javascript >> 浏览文章

Jquery 两个select多选控件中项的移动


发布日期:2018年11月22日
 
Jquery 两个select多选控件中项的移动

<html><head>    <link href="${ctx}/css/stylecss" rel="stylesheet"type="text/css" />    <script src="${ctx}/lib/jquery/jqueryminjs" type="text/javascript"></script><script type="text/javascript"> /**  *动态的给左边的下拉列表创建选项  *具体情况可以从数据库读取数据动态创建选项  */ $(document)ready(function(){  for(var i=;i<=;i++)  {  $("#fb_list")append("<option value="+i+">公开招标小型机采购"+i+"</option>");  }  })  $(function(){  $("#add")click(function(){  if($("#fb_list option:selected")length>)  {  $("#fb_list option:selected")each(function(){  $("#select_list")append("<option value="+$(this)val()+">"+$(this)text()+"</option"); $(this)remove();  })  }  else {  alert("请选择要添加的分包!");  }  })  })  $(function(){  $("#delete")click(function(){  if($("#select_list option:selected")length>)  {  $("#select_list option:selected")each(function(){  $("#fb_list")append("<option value="+$(this)val()+">"+$(this)text()+"</option"); $(this)remove();  })  }  else {  alert("请选择要删除的分包!");  }  })  }) //提交按扭获取左右的options所有值传给后台处理function sel(){ var obj = documentgetElementById(fb_list);  var str="";          for(var i=;i<objoptionslength;i++)     {         if(strlength>)             str = str + "" + objoptions[i]value;         else             str = objoptions[i]value;     }          alert(str);}</script> </head><body><div class="searchDiv mcenter" style="width:px;">  <form name="form" method="post" id="form">        <table style="width:px;margin:px ;" align="center" class="tblresult">   <tr>   <th colspan="" style="fontsize:px;textalign: center">添加人员</th>   </tr>   <tr>   <td>   <table class="noborder">   <tr>   <th>已有人员</th>   </tr>   <tr><td>    <select id="fb_list" name="seled" multiple="true" style="width:px;height:px;">     <option value="">张三</option>    </select>    </td></tr>    </table>   </td>   <td>    <table class="noborder"><tr><td>    <input id="add" type="button" value=">>" style="width:px;"/></td></tr>    <tr><td>    <input id="delete" type="button" value="<<" style="width:px;"/>    </td></tr></table>   </td>   <td>   <table class="noborder">   <tr>   <th>备用人员</th>   </tr>   <tr><td>    <select id="select_list" name="unseled" multiple="true" style="width:px;height:px;">     <option value="">李四</option>     <option value="">王五</option>    </select>    </td></tr>    </table>   </td>   </tr>            <tr>                <td colspan="" style="textalign:center;height:px;">    <input type="button" value="保存" class="btn" onclick="sel();"/>    <input type="button" value="取消" onclick="javascript:doClose();" class="btn"/>    </td>            </tr>          </table>          </form> </div></body></html>

               

上一篇:jQuery数据缓存功能的实现思路

下一篇:JavaScript中的关键字VAR使用详解 分享