javascript操作listbox示例

最新推荐文章于 2023-04-30 11:49:03 发布
最新推荐文章于 2023-04-30 11:49:03 发布
阅读量926 收藏
点赞数

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> js操作listbox示例 </TITLE>
<META CONTENT="EditPlus">
<META CONTENT="">
<META CONTENT="">
<META CONTENT="">
</HEAD>

<BODY>
<script language='javascript'>
/**********************操作ListBox的相关函数***START*********************/


/*
* 把源列表sourcelist中的所有内容移到目标列表targetlist中去
*/
function moveAll(sourceList, targetList){
            var lst1=window.document.getElementById(sourceList);
    var lst2=window.document.getElementById(targetList);
            var length = lst1.options.length;
            for(var i=0;i<length;i++)
            {
                var v = lst1.options[i].value;
                var t = lst1.options[i].text;
                if(!hasValue(targetList,v)){
      //目录列表中没有当前值，则加入
      lst2.options[lst2.options.length] = new Option(t,v,true,true);   
     }
            }
    //把源列表中的内容移除
    removeAll(sourceList);
        }

   /*
   * 将id为listId的列表中的内容全部移除
   */
        function removeAll(listId)
        {
            var lst=window.document.getElementById(listId);
            var length = lst.options.length;
            for(var i=length;i>0;i--)
            {
                lst.options[i-1].parentNode.removeChild(lst.options[i-1]);
            }   
        }
       
   /*
   * 将sourceList中的选中项移动到targetList中去
   */
        function moveSelect(sourceList, targetList)
        {
            var lst1=window.document.getElementById(sourceList);
            var lst2=window.document.getElementById(targetList);
    var length = lst1.options.length;
    for(var i=0;i<length;i++){
     var lstindex=lst1.selectedIndex;
     if(lstindex<0)
      return;
     var v = lst1.options[lstindex].value;
     var t = lst1.options[lstindex].text;
     if(!hasValue(targetList,v)){
      lst2.options[lst2.options.length] = new Option(t,v,true,true);   
     }
     removeSelect(sourceList);
    }
               
        }
       
   /*
   * 删除列表listId中的选中项(删除的为索引值最小的一项)
   */
        function removeSelect(listId)
        {
            var lst2=window.document.getElementById(listId);
            var lstindex=lst2.selectedIndex;
            if(lstindex>=0)
            {
                var v = lst2.options[lstindex].value+";";
                lst2.options[lstindex].parentNode.removeChild(lst2.options[lstindex]);
            }
               
        }


   /*
   * 判断id为listId列表中有没有给定的值v
   */
   function hasValue(listId,v){
    var lst = window.document.getElementById(listId);
    var length = lst.options.length;
    for(var i = 0; i < length; i++){
     var vv = lst.options[i].value;
     if(v == vv){
      return true;
     }
    }
    return false;
   }
      /**********************操作ListBox的相关函数***END*********************/
</script>
<h3>用javascript操作listbox示例</h3>
   <form action='#'>
    <table>
     <tr>
      <td>
       <select multiple='true' style='width:100px;height:120px'>
       <option value='ding0'>ding0</option>
       <option value='ding1'>ding1</option>
       <option value='ding2'>ding2</option>
       <option value='ding3'>ding3</option>
       <option value='ding4'>ding4</option>
       </select>
      </td>
      <td width='50' align='center'>
       <table>
       <tr><td><input type='button' value='>>' source","target");'/></td></tr>
       <tr><td><input type='button' value=' > ' source","target");'/></td></tr>
       <tr><td><input type='button' value=' < ' target","source");'/></td></tr>
       <tr><td><input type='button' value='<<' target","source");'/></td></tr>
       </table>
      </td>
      <td>
       <select multiple='true' style='width:100px;height:120px'>
       </select>
      </td>
     </tr>
    </table>
   </form>
</BODY>
</HTML>
示例效果如图：


苍月代表我
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java listbox_listbox控件的一些操作
weixin_39787057的博客
02-16 332
1. 属性列表：SelectionMode 组件中条目的选择类型，即多选(Multiple)、单选(Single)Rows 列表框中显示总共多少行Selected 检测条目是否被选中SelectedItem 返回的类型是ListItem，获得列表框中被选择的条目Count 列表框中条目的总数SelectedIndex ...
js操作listbox
12-23
js,listbox,select,item,selectedValue,selectedIndex
说说wps jsa的ListBox控件的数组写入方法
hsl2487718的博客
04-30 1417
目前小编很想用WPS的ListBox控件来做一些应用开发，从官方详细阅读了ListBox控件的说明，能实用的没几个。目前很多WPS JS宏教程都不太愿意谈WPS的控件，也是因为WPS控件的功能太差，简直差到极点了。ListBox控件在官方文档的其他说明中只是花瓶，一点都不实用！看看VBA的ListBox控件，除了上面两个方法，还有list属性，很方便地接收了一个二维数组，这是一个很常用的功能。1、AddItem()方法，两个参数，其中一个文本，另外一个行的序号。再也找到其他的方法了，泪奔！
listbox控件的一些操作
divingmaomao的专栏
03-01 1023
1. 属性列表：    SelectionMode    组件中条目的选择类型，即多选(Multiple)、单选(Single)    Rows             列表框中显示总共多少行    Selected         检测条目是否被选中    SelectedItem     返回的类型是ListItem，获得列表框中被选择的条目    Count           
【Vegas原创】使用javascript实现两个listbox中的添加、删除
weixin_38168918的博客
10-13 74
1.ListBox为服务器端控件，list可以在服务器端初始化 2.Button可以为服务器端，也可以为客户端控件： 如果为服务器端控件，需要在页面初始化的时候为其添加事件处理为： btn_updaddrel.Attributes.Add("OnClick","BLOCKEDSCRIPTadd();"); 如果为客户端控件，则在声明控件的时候指定事件处理：...
用JavaScript实现类似于ListBox功能示例代码
10-26
主要介绍了用JavaScript实现类似于ListBox功能,需要的朋友可以参考下
JavaScript ListBox控件
04-04
JavaScript ListBox控件是一种在网页上实现下拉列表功能的元素，它允许用户在一组预定义...通过阅读提供的"JavaScript-ListBox-Control.pdf"文件，你可以获得更详细的步骤和示例，以帮助你在实践中更好地运用这些知识。
JavaScript如何从listbox里同时删除多个项目
10-26
在JavaScript中，从listbox（多选列表框）中删除多个项目是一项常见的操作，尤其是在处理用户交互时。这里的关键在于正确地处理索引问题，确保删除操作不会导致未预期的后果。标题和描述中提到的方法是自下而上地...
给ListBox添加双击事件示例代码
09-04
当用户在浏览器上执行操作（如双击`ListBox`项）时，会触发客户端的JavaScript事件，然后通过AJAX或页面回发（Postback）将事件信息传递到服务器端进行处理。 在给定的示例代码中，我们可以看到以下关键部分： 1. ...
用JS做了个ListBox的简单功能
大米文子
04-17 183
[code="java"] 美元/英镑 美元/港币 美元/新加坡元 美元/日元 美元/加拿大元 美元/欧元 ...
listBox JS 实现
12-26
试用Javascript实现ListBox的页面实现
用javascript操作 asp .net listBox控件
07-08 2033
无标题页 //添加新项 function Button1_Click() { if(!document.getElementById) { return true; }
javascript操作listbox，实现无刷新
gentlelhn的专栏
11-06 420
 function SelectAll()        {            var lst1=window.document.getElementById("SourceListBox");            var length = lst1.options.length;            for(var i=0;i            {                va
javascript操作listbox方法
Phoxe_bai的专栏
03-20 2094
选择人员或者部门或其他时,经常会用到2个listbox,下面这js代码,希望能给大家以及自己带来方便function SelectAll()        {            var lst1=window.document.getElementById("SourceListBox");            var length = lst1.options.length;     
JS ListBox动态加载数据
My Blog's
08-07 6736
       因项目需要，需要从listbox取出部分信息进行加载。原理为当body初始化时将全部数据保存到一个隐藏的listbox中，通过在body指定onload执行的函数。当用户选择部门时，首先将所有的数据项清除，然后进行循环，将匹配的数据加载到listbox中，因为没有用的服务器事件，因此选择的部门名称，在源数据源中存在。不然单纯的利用js是做不到的。代码如下：  %@ P
WPF中使用LISTBOX的程序示例
最新发布
05-14
以下是一个简单的 WPF 程序示例，演示如何使用 ListBox 控件： ```xaml <Window x:Class="ListBoxDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ListBox Demo" Height="300" Width="400"> <Grid> <ListBox x:Name="myListBox" HorizontalAlignment="Left" Margin="10,10,0,10" Width="120"> <ListBoxItem>Item 1</ListBoxItem> <ListBoxItem>Item 2</ListBoxItem> <ListBoxItem>Item 3</ListBoxItem> <ListBoxItem>Item 4</ListBoxItem> </ListBox> <Button Content="Add Item" HorizontalAlignment="Left" Margin="140,10,0,0" VerticalAlignment="Top" Width="75" Click="AddItem_Click"/> <Button Content="Remove Item" HorizontalAlignment="Left" Margin="140,37,0,0" VerticalAlignment="Top" Width="75" Click="RemoveItem_Click"/> </Grid> </Window> ``` 在这个示例中，我们创建了一个 ListBox 控件，并添加了四个 ListBoxItem。我们还添加了两个按钮，一个用于添加新项，一个用于删除选定的项。这些按钮的单击事件处理程序将在代码中定义。 接下来是代码部分： ```csharp using System.Windows; using System.Windows.Controls; namespace ListBoxDemo { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void AddItem_Click(object sender, RoutedEventArgs e) { // 创建新的ListBoxItem并将其添加到ListBox ListBoxItem newItem = new ListBoxItem(); newItem.Content = "New Item"; myListBox.Items.Add(newItem); } private void RemoveItem_Click(object sender, RoutedEventArgs e) { // 删除选定的项 myListBox.Items.Remove(myListBox.SelectedItem); } } } ``` 在这个代码中，我们创建了两个事件处理程序：AddItem_Click 和 RemoveItem_Click。AddItem_Click 创建一个新的 ListBoxItem，并将其添加到 ListBox 中。RemoveItem_Click 删除当前选定的项。 以上就是一个简单的 WPF ListBox 示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值