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

代码如下:

<html>
<head>
    <title>Javascript版选择下拉菜单互移且排序</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
    <p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。</p>
    <form method="post" name="myform">
    <table border="0" width="300">
        <tr>
            <td width="40%">
                <select style="width:100px; height:200px" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)">
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="山东">山东</option>
                    <option value="安徽">安徽</option>
                    <option value="重庆">重庆</option>
                    <option value="福建">福建</option>
                    <option value="甘肃">甘肃</option>
                    <option value="广东">广东</option>
                    <option value="广西">广西</option>
                    <option value="贵州">贵州</option>
                    <option value="海南">海南</option>
                    <option value="河北">河北</option>
                    <option value="黑龙江">黑龙江</option>
                    <option value="河南">河南</option>
                    <option value="湖北">湖北</option>
                    <option value="湖南">湖南</option>
                    <option value="内蒙古">内蒙古</option>
                    <option value="江苏">江苏</option>
                    <option value="江西">江西</option>
                    <option value="吉林">吉林</option>
                    <option value="辽宁">辽宁</option>
                    <option value="宁夏">宁夏</option>
                    <option value="青海">青海</option>
                    <option value="山西">山西</option>
                    <option value="陕西">陕西</option>
                    <option value="四川">四川</option>
                    <option value="天津">天津</option>
                    <option value="西藏">西藏</option>
                    <option value="新疆">新疆</option>
                    <option value="云南">云南</option>
                    <option value="浙江">浙江</option>
                    <option value="香港">香港</option>
                    <option value="澳门">澳门</option>
                    <option value="台湾">台湾</option>
                    <option value="其他">其他</option>
                </select>
            </td>
            <td width="20%" align="center">
                <input type="button" value=">>" onclick="moveOption(document.myform.list1, document.myform.list2)"><br />
                <br />
                <input type="button" value="<<" onclick="moveOption(document.myform.list2, document.myform.list1)">
            </td>
            <td width="40%">
                <select style="width:100px; height:200px" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)">
                </select>
            </td>
            <td>
                <button onclick="changepos(list2,-1)" type="button">
                    ∧</button>
                <br />
                <button onclick="changepos(list2,1)" type="button">
                    ∨</button>
            </td>
        </tr>
    </table>
    值：<input type="text" name="city" size="40">
    </form>
    <script language="JavaScript">
    <!--
        function moveOption(e1, e2) {
            try {
                for (var i = 0; i < e1.options.length; i++) {
                    if (e1.options[i].selected) {
                        var e = e1.options[i];
                        e2.options.add(new Option(e.text, e.value));
                        e1.remove(i);
                        i = i - 1
                    }
                }
                document.myform.city.value = getvalue(document.myform.list2);
            }
            catch (e) { }
        }

function getvalue(geto) {
            var allvalue = "";
            for (var i = 0; i < geto.options.length; i++) {
                allvalue += geto.options[i].value + ",";
            }
            return allvalue;
        }

function changepos(obj, index) {
            if (index == -1) {
                if (obj.selectedIndex > 0) {
                    obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex - 1))
                }
            }
            else if (index == 1) {
                if (obj.selectedIndex < obj.options.length - 1) {
                    obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex + 1))
                }
            }
        }
    //-->
    </script>
</body>
</html>

赞 (0)

相关推荐

  • ASP.NET中 ListBox列表框控件的使用方法

    ListBox 控件允许用户从预定义的列表中选择一个或多个项.它与 DropDownList 控件的不同之处在于,它不但可以一次显示多个项,而且(可选)还允许用户选择多个项. 一.属性 属性 值 作用 SelectionMode Single|Multiple 列表选择模式:单选|多选 Selected False|True 是否为选中状态 二.示例 ListBox.aspx 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup=&q

  • C#保存listbox中数据到文本文件的方法

    本文实例讲述了C#保存listbox中数据到文本文件的方法.分享给大家供大家参考.具体实现方法如下: private void SaveLstToTxt(ListBox lst) { sfd.Filter = "(*.txt)|*.txt"; if (sfd.ShowDialog() == DialogResult.OK) { string sPath = sfd.FileName; FileStream fs = new FileStream(sPath, FileMode.Crea

  • C#读取文本文件到listbox组件的方法

    本文实例讲述了C#读取文本文件到listbox组件的方法.分享给大家供大家参考.具体实现方法如下: private void AddTxtToLst(string path,ListBox lst) { StreamReader file = new StreamReader(path,Encoding.Default); string s = ""; while (s != null) { s = file.ReadLine(); if (!string.IsNullOrEmpty(

  • C#入门教程之ListBox控件使用方法

    C#入门教程之ListBox控件使用方法

    ListBox控件的使用: 1)控件属性 Items SelectedItems SelectioModes 2)数据绑定 DataSoure DisplayMember ValueMenber 3)实例 下面开始一一说明上面的ListBox控件的使用. 首先来说控件的属性, (1)Items:使用此属性获取列表控件项的属性.此属性可用于确定列表控件中的选定项.添加items时既可以设计时静态添加,也可以在代码中动态添加.如果不想显示设计时添加的items,可以在代码中添加this.listBo

  • ASP.NET中DropDownList和ListBox实现两级联动功能

    ASP.NET中DropDownList和ListBox实现两级联动功能

    DropDownList和ListBox实现两级联动功能,它们可以将从后台数据库中搜选的出来的信息加以绑定,这里要实现的功能是在DropDownList中选择"省",然后让ListBox自动将其省份下的"市"显示出来,这就是所谓的两级联动功能,这个功能我们在很多注册网页上看见,今天就为大家解开ASP.NET神秘的面纱. 一.设置前台界面,在Web窗体中添加DropDownList和ListBox两个控件. 界面图如下所示. 二.编写后台代码 在这,后台代码编写在其窗

  • 对ListBox的添加移除操作实例分享

    前台代码: 复制代码 代码如下: <div> <asp:ListBox ID="ListBox1" runat="server" Height="123px" Width="113px" SelectionMode="Multiple"> <asp:ListItem>tom</asp:ListItem> <asp:ListItem>jion<

  • ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox

    ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox

    这里我们举例校验ListBox两个规则: •校验必选项 •选择范围在0~4项 界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 350px; height: 200px;"> <table border="0" cellpadd

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

    前台 复制代码 代码如下: <head runat="server"> <title>部门多选</title> <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0"> <meta name="CODE_LANGUAGE" content="C#"> <meta nam

  • .net中实现listBox左右移动

    今天用到listbox左右移动在网上找了一个,网友分享出来的,感觉不错,这里推荐给大家 复制代码 代码如下: <div style="width:200px; float:left;">     <table>     <tr>         <td  width="50%">         <asp:ListBox ID="ListBox2" runat="server&quo

  • C#实现让ListBox适应最大Item宽度的方法

    本文实例讲述了C#实现让ListBox适应最大Item宽度的方法.分享给大家供大家参考.具体实现方法如下: private void button1_Click(object sender, EventArgs e) { for (int i = 1; i <= 16; i++) { listBox1.Items.Add("TTTTTTTTTTTTTTTTTTTTTTTTTTTTT" + i.ToString()); } } private void button2_Click(

  • 给ListBox添加双击事件示例代码

    复制代码 代码如下: <!--创建一个JS调用button的click事件--> <script type="text/javascript"> function JsListChangeItem() { document.getElementById("buttonShow").click(); } </script> <!--创建一个隐藏的button,创建双击事件---> <asp:Button ID=&q

  • asp.net中ListBox 绑定多个选项为选中及删除实现方法

    asp.net中ListBox 绑定多个选项为选中及删除实现方法

    我们先来看listbox绑定多选项实现 复制代码 代码如下: <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"

随机推荐