`

两个select 多选 移入移出

    博客分类:
  • jsp
阅读更多
效果:





<tr>
  <td>工号选择:</td>
  <td  width="80%">
  <select id="choseWorkNo" name="choseWorkNo" multiple="multiple" style="width:100px;height:100px;" ondblclick="addWorkNo();">
<option value="002">测试2</option>
<option value="003">测试3</option>
<option value="004">测试4</option>
<option value="005">测试5</option>
</select>
    <font color="orange">*</font>
  </td>
</tr>
<tr>
  <td></td>
  <td  width="80%">
  &nbsp;&nbsp;&nbsp;
  <input type="button" onclick="addWorkNo();" width="60px" value="∨"/>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="button" onclick="deleteWorkNo();"  width="100px" value="∧"/>
  </td>
</tr>
<tr>
  <td>已选工号:</td>
  <td  width="80%">
  <select id="chosedWorkNo" name="chosedWorkNo" multiple="multiple" style="width:100px;height:100px;" ondblclick="deleteWorkNo();">
</select>
    <font color="orange">*</font>
  </td>
</tr>


function addWorkNo(){
if($("#choseWorkNo option:selected").length>0)
   {
$("#choseWorkNo option:selected").each(function(){
       $("#chosedWorkNo").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
$(this).remove(); 
      });
sortMe($("#chosedWorkNo"));
    }
    else
    {
      alert("请选择待添加的工号!");
    }
}

function deleteWorkNo(){
if($("#chosedWorkNo option:selected").length>0)
{
$("#chosedWorkNo option:selected").each(function(){
   $("#choseWorkNo").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
   $(this).remove(); 
   });
sortMe($("#choseWorkNo"));
}
else
{
alert("请选择待移除的工号!");
}
}
//排序
function sortMe(oSel){
var ln = oSel[0].options.length;
var arr = new Array(); // 这是关键部分

// 将select中的所有option的value值将保存在Array中
for (var i = 0; i < ln; i++)
{
  arr[i] = new Array();
  // 如果需要对option中的文本排序,可以改为arr[i] = oSel.options[i].text;
  arr[i][0] = oSel[0].options[i].value;
  arr[i][1] = oSel[0].options[i].text;
}
arr.sort(function(x,y){
return x[0]-y[0];
});
//arr.sort(); // 开始排序

// 清空Select中全部Option
while (ln--)
{
  oSel[0].options[ln] = null;
}
// 将排序后的数组重新添加到Select中
for (i = 0; i < arr.length; i++)
{
  //文本 数值
  oSel[0].add(new Option(arr[i][1], arr[i][0]));
}
}
  • 大小: 5.5 KB
分享到:
评论

相关推荐

    下拉框多选select多选

    在网页设计和开发中,"下拉框多选select多选"是一个常见的功能,它允许用户在下拉菜单中选择多个选项,而不仅仅是一个。在HTML中,`&lt;select&gt;`元素通常用于创建这样的下拉菜单,但默认情况下,`&lt;select&gt;`只支持单选。...

    select多选下拉框美化

    总之,"select多选下拉框美化"是一个涉及前端多个领域的任务,需要结合jQuery的动态操作和CSS的样式定制,通过创新的布局和交互设计,为用户提供更优质的使用体验。在实际应用中,开发者还需要根据项目需求和用户...

    基于layui的select多选解决方案

    在layui的基础上,把select选择框可更改为多选框,并可进行搜索、筛选值。下拉框内容可物理分页配置、自定义搜索模式(远程搜索)。 存在layui时, 同样也能直接使用xmSelect, 不用必须layui.xmSelect 具有多选上限设置...

    vue-select 多选下拉列表

    vue-select 多选下拉列表,建议用火狐或者谷歌浏览器打开,低版本IE对vue兼容性不好

    原生select实现多选功能

    原生select实现多选功能

    select多选与美化

    "select多选与美化"这个主题关注的是如何在HTML的下拉列表中实现多选功能,并且兼容各种主流浏览器,包括Firefox、Opera、Chrome、Safari以及IE6到IE9。这通常涉及到JavaScript库,特别是jQuery的使用,以及CSS样式...

    select多选下拉列表+模糊查询功能.rar

    select多选下拉列表+模糊查询功能,亲测完整,有ASP和HTML样例,代码完整。 &lt;!DOCTYPE html&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;script src="jquery.min.js"&gt;&lt;/script&gt; ...

    div 模拟 select 多选

    div 模拟 select 多选 实现还有点bug,望大家一起改正。

    element ui select多选组件 重构

    在本项目中,我们关注的是 "select" 多选组件的重构,它是一个用于用户从多个选项中选择的交互元素。在 Element UI 中,`el-select` 组件支持单选和多选模式,并允许自定义样式和行为。 重构通常涉及到改进代码结构...

    jquery+css+div 实现的模拟select多选

    jquery+css+div 实现的模拟select多选 jquery+css+div 实现的模拟select多选

    实现select多选插件

    在本文中,我们将深入探讨如何实现一个`select`多选插件。`select`元素是HTML中的一个基础组件,用于创建下拉菜单供用户选择。然而,原生的`select`元素并不支持多选功能,这使得在需要用户可以选择多个选项的场景下...

    select 下拉框可以多选

    在某些场景下,我们可能需要使`select`下拉框支持多选,即用户可以同时勾选多个选项。这就是"select下拉框可以多选"这个主题所涵盖的知识点。 首先,要实现`select`下拉框的多选功能,我们需要在`&lt;select&gt;`标签中...

    html多选下拉框 ,CheckBox的Select组件 可多选的下拉框

    在HTML中,创建一个可多选的下拉框通常涉及到`&lt;select&gt;`元素与`&lt;option&gt;`元素的组合,但为了实现多选功能,我们需要使用`&lt;input type="checkbox"&gt;`和自定义的JavaScript或者利用现代浏览器支持的Web组件技术。...

    select 实现多选

    在这个例子中,用户可以勾选一个、两个或全部三个选项。 ### CSS美化 虽然默认的多选下拉菜单在所有浏览器中的样式可能不尽相同,但我们可以使用CSS来统一并增强其外观。例如,我们可以改变边框、背景颜色、字体...

    select模拟多选下拉

    在网页开发中,"select模拟多选下拉"是一个常见的需求,特别是在需要用户选择多个选项时。传统的HTML `&lt;select&gt;` 元素虽然支持`multiple`属性实现多选,但其样式和交互方式往往不能满足现代网页设计的需求。因此,...

    Select多选

    其中,“Select多选”插件——layui-select-ext,就是针对下拉选择框的多选功能进行优化和增强的一个杰出实例。 layui-select-ext的核心功能在于提供了一个可多选的下拉框,使得用户在选择数据时不再局限于单个选项...

    layui多选下拉框样式,整套layui-select-multiple

    Layui是一个强大的前端UI框架,它提供了一系列美观且易于使用的组件,包括我们所讨论的多选下拉框。"layui-select-multiple"就是Layui专门为多选下拉框设计的一整套样式和功能。 首先,我们来看“layui多选下拉框...

    angularjs select2 多选下拉框

    angularjs select2 多选, 多选类似autocomplete 查询选择 适用于前端开发者,也适用于程序开发人员 多选可适用很多场景,比如多用户选择等等

    多选多select

    多选多select的基本实现思路是使用两个`&lt;select&gt;`标签作为容器,其中一个是用来存放待选择的选项,另一个则用于存放已选择的选项。通常,还会提供一组按钮来控制选项的移动。这些按钮包括“单个移动”(如“&gt;”、“...

    下拉多选select multiple

    在网页设计和开发中,"下拉多选select multiple"是一种常见的交互元素,它允许用户在下拉菜单中选择一个或多个选项。Bootstrap框架提供了一种优雅的方式来实现这样的功能,同时增强了用户体验,尤其是在数据量较大时...

Global site tag (gtag.js) - Google Analytics