`
tw5566
  • 浏览: 460768 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

用JS做了个ListBox的简单功能

阅读更多
<!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></title>  
</head>  
<body>  
<script language="JavaScript" type="text/javascript">  
<!--   
function addIt(){   
   var input = document.getElementById("input");   
   var output = document.getElementById("output");   
   for(i = 0; i < input.length; i ++ )   {   
      if(input[i].selected == true)      {   
         if( output.length == 0){   
            var option = new Option();   
            option.text = input[i].innerText;   
            output.add(option);   
         }   
  
         var isExist = false;   
         for(j = 0; j < output.length; j ++ ){   
            if (output[j].text ==  input[i].innerText){   
               isExist = true;   
               break;   
            }   
         }   
  
         if (isExist == false){   
            var option = new Option();   
            option.text = input[i].innerText;   
            output.add(option);   
         }   
      }   
   }   
}   
  
function deleteIt(){   
    var output = document.getElementById("output");   
    for(i = 0; i<output.length; i++){   
        if (output[i].selected == true){   
            output.options.removeChild(output[i--]);   
        }   
    }   
  
}   
// -->  
</script>  
<table width="80%" border="0" align="center" style="margin-top:20px;">  
  <tr>  
    <td align="right">  
      <select name="input" size="10" multiple="multiple" id="input" style="width:200px; font-size:16px">  
        <option>美元/英镑</option>  
        <option>美元/港币</option>  
        <option>美元/新加坡元</option>  
        <option>美元/日元</option>  
        <option>美元/加拿大元</option>  
        <option>美元/欧元</option>  
      </select>  
    </td>  
    <td align="center">  
      <p>  
        <input type="button" name="Submit" value="增  加" onclick="addIt()"/>  
      </p>  
      <p>  
        <input type="button" name="Submit2" value="删  除" onclick="deleteIt()"/>  
      </p>  
    </td>  
    <td>  
      <select name="output" size="10" multiple="multiple" id="output" style="width:200px; font-size:16px">  
      </select>  
    </td>  
  </tr>  
</table>  
</body>  
</html>  
分享到:
评论

相关推荐

    两个listbox同时滚动

    在某些场景下,比如对比性展示或者同步操作,我们可能需要实现两个Listbox控件之间的同步滚动功能。"两个listbox同时滚动"这个主题就是关于如何在用户滚动其中一个Listbox时,使另一个Listbox也同步滚动的知识点。 ...

    更新的Javascript Listbox和TreeView控件

    在更新前,基本的Listbox可能只提供了简单的单选或全选功能。然而,这次更新为Listbox添加了更灵活的“设置选择”功能。这意味着开发者现在可以实现自定义的多选模式,比如通过提供复选框让用户能够独立选择多个项。...

    C#js实现ListBox左右移动

    总结起来,实现"C#js实现ListBox左右移动"的功能,需要结合C#后端处理与JavaScript前端交互。C#用于处理服务器端的数据操作,而JavaScript则负责客户端的实时反馈,提供无缝的用户体验。在实际的Web开发过程中,这样...

    ListBox 项的双击事件

    在探讨“ListBox项的双击事件”这一主题时,我们首先需要理解ListBox控件的基本功能以及如何处理用户交互,特别是双击事件。ListBox是Windows Forms和WPF等图形用户界面框架中常用的一种控件,用于展示一系列选项供...

    jquery双列表框插件Bootstrap Dual Listbox

    1. `dist`目录:包含编译后的CSS和JavaScript文件,如`bootstrap-duallistbox.css`和`bootstrap-duallistbox.js`,它们是插件的核心代码。 2. `demo`目录:提供了示例页面,用于展示插件的使用方法和效果。 3. `src`...

    ListBox动态添加数据删除数据和上移下移

    这里有一个简单的示例,展示如何在Windows Forms中实现这个功能: ```csharp private void MoveUpButton_Click(object sender, EventArgs e) { if (listBox1.SelectedIndex &gt; 0) { string selectedItem = ...

    webfrom- ListBox 控件的使用.pdf

    无论是简单的项目显示还是复杂的交互式操作,`ListBox` 都能够满足需求。开发者可以根据实际应用场景灵活地运用这些特性和方法,提高应用程序的可用性和用户体验。 ### 参考链接 - ...

    JQuery、C#两种操作ListBox的方法

    在Web开发中,ListBox是一种常用的控件,它允许用户从多个选项中选择一个或多个条目。本篇文章将深入探讨如何使用JQuery和C#这两种不同的技术来操作ListBox。 首先,我们来了解一下JQuery。JQuery是一个强大的...

    listbox添加部分隐藏字符

    综上所述,实现“listbox添加部分隐藏字符”的功能,可以通过编程语言的图形绘制能力、CSS样式控制以及JavaScript的DOM操作来完成。这个过程涉及到对控件的自定义、字符串处理和前端交互等多个方面的技术知识。在...

    JS ListBox的简单功能实现代码

    由于提供的文件信息中包含了不完整的代码和一些文本错误,我将尽量从中提炼出有关于"JS ListBox的简单功能实现代码"的知识点,并补充完整可能的代码逻辑。 ListBox是一种常见的HTML界面元素,用于在网页上显示一...

    js 获取Listbox选择的值的代码

    在这个场景下,我们关注的是如何使用JavaScript来获取一个具有多选功能(Listbox的SelectionMode设为"Multiple")的列表框(Listbox)中用户所选择的值。下面我们将深入探讨这个主题。 首先,我们需要了解`Listbox`的...

    ZK_DEMO-listbox-paging.zip_DEMO_ListBox java

    【标题】"ZK_DEMO-listbox-paging.zip_DEMO_ListBox Java" 是一个与Java相关的压缩包,其中包含了一个示例项目,演示了如何在Java应用程序中实现ListBox的分页功能。ZK是一个基于Java的富客户端用户界面框架,它使得...

    JavaScript控制两个列表框listbox左右交换数据的方法

    在网页开发中,经常需要实现两个列表框(listbox)之间的数据交换功能,即从一个列表框中选择某些项并移动到另一个列表框中。本文将详细介绍如何使用JavaScript来实现这一功能,并通过实例来具体分析操作列表框的...

    ListBox实现上移,下移,左移,右移的简单实例

    在这个实例中,我们看到如何使用JavaScript来实现ListBox中选项的动态移动,包括上移、下移、左移和右移的功能。这个功能常用于需要调整列表顺序或者在两个ListBox之间交换项目的场景。 首先,我们来看一下HTML部分...

    asp.net listbox实现单选全选取消

    单选功能指的是ListBox中的选项是单选按钮形式的,用户只能选择一个项目。这需要设置ListBox的SelectionMode属性为“Single”。示例代码: ```asp &lt;asp:listbox id="UserList" runat="server" SelectionMode="Single...

    轻松使用jQuery双向select控件Bootstrap Dual Listbox

    此外,文档还提出了一个扩展功能,即如何通过一个通用的JavaScript函数来初始化双向选择列表,并传入参数来动态填充初始的选中数据。这个函数可以接收三个参数:queryParam1是参数(在文档中未具体说明用途,可能...

Global site tag (gtag.js) - Google Analytics