ListBox 实现左移右移

最新推荐文章于 2021-06-21 00:46:22 发布
最新推荐文章于 2021-06-21 00:46:22 发布
阅读量809 收藏
点赞数
分类专栏： 我的收获 文章标签： button input function javascript table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suoxl/article/details/4350890
版权

<HTML>
<HEAD>
<TITLE>listbox and combobox</TITLE>
</HEAD>
<script language="javascript">

//*****************************************************************************************start...
function rightRemove(){

     var oSelectCode=document.getElementById("selectColor");
     var oSelectedCode=document.getElementById("selectedColor");
     var i;

     for(i=0;i<oSelectCode.options.length;i++)
     {
        if(oSelectCode.options[i].selected)
        {
            //var newOption = document.createElement("option");
            //newOption.setAttribute("value", oSelectCode.options[i].value);
            //newOption.innerHTML = oSelectCode.options[i].text;

            //oSelectedCode.appendChild(newOption);
   oSelectedCode.options.add(new Option(oSelectCode.options[i].text, oSelectCode.options[i].value));
            oSelectCode.removeChild(oSelectCode.options[i]);
   i = i-1;
        }
     }
}

function rightRemoveAll(){

     var oSelectCode=document.getElementById("selectColor");
     var oSelectedCode=document.getElementById("selectedColor");
  var i;
    
     for(i=0;i<oSelectCode.options.length;i++)
     {
  //var newOption = document.createElement("option");
  //newOption.setAttribute("value", oSelectCode.options[i].value);
  //newOption.innerHTML = oSelectCode.options[i].text;
       
  //oSelectedCode.appendChild(newOption);
  oSelectedCode.options.add(new Option(oSelectCode.options[i].text, oSelectCode.options[i].value));
  oSelectCode.removeChild(oSelectCode.options[i]);
  i = i-1;
     }
}

function leftRemove(){

     var oSelectCode=document.getElementById("selectColor");
     var oSelectedCode=document.getElementById("selectedColor");
  var i;

     for(i=0;i<oSelectedCode.options.length;i++)
     {
        if(oSelectedCode.options[i].selected)
        {
            //var newOption = document.createElement("option");
            //newOption.setAttribute("value", oSelectedCode.options[i].value);
            //newOption.innerHTML = oSelectedCode.options[i].text;

            //oSelectCode.appendChild(newOption);
            oSelectCode.options.add(new Option(oSelectedCode.options[i].text, oSelectedCode.options[i].value));
   oSelectedCode.removeChild(oSelectedCode.options[i]);
   i = i-1;
        }
     }
}

function leftRemoveAll(){

     var oSelectCode=document.getElementById("selectColor");
     var oSelectedCode=document.getElementById("selectedColor");
  var i;

     for(i=0;i<oSelectedCode.options.length;i++)
     {
  //var newOption = document.createElement("option");
  //newOption.setAttribute("value", oSelectedCode.options[i].value);
  //newOption.innerHTML = oSelectedCode.options[i].text;

  //oSelectCode.appendChild(newOption);
  oSelectCode.options.add(new Option(oSelectedCode.options[i].text, oSelectedCode.options[i].value));
  oSelectedCode.removeChild(oSelectedCode.options[i]);
  i = i-1;
     }
}
 //*****************************************************************************************end...
</script>
<BODY>
<form>
   <table>
      <tr>
     <td align="center" valign="middle">
   <select id="selectColor" name="selectColor" multiple="true" size="10" style="width:100px;"><!-- 加size="3"为列表框 -->
      <option value="0">红色</option>
      <option value="1">橙色</option>
      <option value="2">黄色</option>
      <option value="3">绿色</option>
      <option value="4">蓝色</option>
   </select>
  </td>
  <td align="center" valign="middle">
   <table>
              <tr>
       <td align="center" valign="middle">
       <input type="button" value="&gt;" οnclick="rightRemove();"><br>
       <input type="button" value="&gt;&gt;" οnclick="rightRemoveAll();"><br>
       <input type="button" value="&lt;" οnclick="leftRemove();"><br>
       <input type="button" value="&lt;&lt;" οnclick="leftRemoveAll();"><br>
    </td>
     </tr>
     </table>
  </td>
  <td align="center" valign="middle">
   <select id="selectedColor" name="selectedColor" multiple="true" size="10" style="width:100px;"><!-- 加size="3"为列表框 -->
      <option value="5">锭色</option>
      <option value="6">紫色</option>
   </select>
  </td>
   </tr>
   </table>
</form>
</BODY>
</HTML>

suoxl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ListBox 左移右移
scjy127的专栏
08-13 1055
  //全选        private void all_Click(object sender, EventArgs e)        ...{                if (this.lstpcik.Items.Count == 0)                ...{                    return;                }    
ListBox内容左右移动
weixin_44588370的博客
07-18 1089
页面布局如下： public Form1() { InitializeComponent(); LeftList.Items.Clear();//先是把左边的ListBox的内容清空 string[] LeftStr = new string[] { "苹果", "香蕉", "荔枝"...
C#js实现ListBox左右移动
12-05
C#js实现ListBox左边的移动到右边，右边的移动到左边
ListBox实现上移,下移,左移,右移操作
provence_20的博客
12-20 1161
[html] view plain copy html>   head>       title>Javascript版选择下拉菜单互移且排序title>       meta http-equiv="Content-Type" content="text/html; charset=gb2312">   head>   body>       p>选定一
WPF ListBox实现上移下移功能
10-16
实现上移下移功能，具体绑定一个数据源，操作数据源，最后把数据源赋值给数据源。
2个Listbox 之间数据的左右移动，及上下移动
weixin_30559481的博客
08-23 466
基本情况 效果图： 左移效果： 其余效果：右边的listbox进行上下移动。 listbox的属性设置为：Multiple 解决方案（一）： 调试结果：PASS (√) Code 1 2publicpartialclassDefault10:System.Web.UI.Page 3{ 4protectedvoidPa...
ListBox(上移,下移,左移,右移)
weixin_30901729的博客
03-22 68
<HTML><HEAD><TITLE>选择下拉菜单</TITLE><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><METANAME="Description"CONTENT="Powerbyhill"></HEAD>&...
[唐胡璐]VS技巧 - 两个ListBox中的项左右移动
weixin_30483495的博客
01-16 108
实现如下图所示的功能：代码如下所示：///<summary> ///Moveoneormoreitemsfromlefttoright ///</summary> ///<paramname="sender"></param> ///<paramname="e"></p...
HTML5如何将列表向左右移,分类列表左移右移操作
weixin_30120049的博客
06-21 1385
js操作列表左右移动，代码如下：分类列表左移右移操作选项1选项2选项3选项4选项5选项6选项7选项8选项9//document.getElementById("add").onclick = function(){/** 选项1选项2选项3选项4选项5选项6选项7选项8*/var firstElement = document.getElementById("first");var optionE...
在C#中实现两个listbox的项移动（winform）
zjk20108023的专栏
03-26 3633
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace arbli
C#：控制ListBox中的项目上下移动
鞠勇鸿的技术专栏
10-07 2670
private void btn_down_Click(object sender, EventArgs e) { int index = listBox1.SelectedIndex; if (index == -1) //没选中 { return; } else if (index&lt;listBox1.Items.Count-1) { string str = li...
vs2005控件演示之 列表框 《ListBox》
08-30 1463
第一次发表到首页，我觉得这应该还是值得，如果DUDU审后觉得不合适，帮我还是放新手里面就是了，谢谢！列表框 ListBox  我也不知道怎么形容这个,反正网上用得很多!他的大概功能就是把下拉列表给长高了,然后不能从下面伸一截出来了,但是他一样可以装很多东西,而且有一优势,可以同时选择多个!,下面分别做几个演示!!属性列表 Selec
winform listbox实现分栏
最新发布
06-13
要实现Winform ListBox的分栏效果，可以使用它的MultiColumn属性来设置显示多列，同时设置ColumnWidth属性来指定每列的宽度，例如： ```csharp listBox1.MultiColumn = true; listBox1.ColumnWidth = 100; ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值