`

JavaScript控制listbox

JavaScriptXHTMLHTML.netC 
阅读更多 
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<mce:script runat="server"></mce:script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>无标题页</title>
    <mce:script language="javascript" type="text/javascript"><!--
    //添加新项
    function Button1_Click()
    {
      if(!document.getElementById)
      {
         return true;
      }      
      
      var newoption=document.createElement("OPTION");
      var txtBox3=document.getElementById("TextBox3");
      var txtBox4=document.getElementById("TextBox4");
      
      newoption.text=txtBox3.value;
      newoption.value=txtBox4.value;
      
      var listBox1=document.getElementById("ListBox1");
      listBox1.add(newoption);
      return false;
   }
   
    //清空options集合
    //html select元素没有一下全部清空optins集合的方法，只能一个一个的清除
    function Button3_Click()
    {     
      if(!document.getElementById)
      {
        return true;
      }
      var listBox=document.getElementById("ListBox1");
//      alert(listBox.options.length);
//     
//用这样的方法删除所有的元素不会成功，因为lenth属性会在删除一个元素后发生变第 
//      for(var i=0;i<=listBox.options.length;i++)
//      {
//        listBox.remove(i);
//      }
      
      while(listBox.options.length>0)
      {
        listBox.remove(0);
      }
      return false;      
    }
    
    //判断某个元素在不在options集合里面
    function Button4_Click()
    {     
      if(!document.getElementById)
      {
        return true;
      }
      
      var listBox=document.getElementById("ListBox1");
      var txtBox1=document.getElementById("TextBox1");
      var txtBox2=document.getElementById("TextBox2");    
      var ok=false;
      for(var i=0;i<listBox.options.length;i++)
      {
        if((listBox.options[i].text==txtBox1.value) && (listBox.options[i].value==txtBox2.value))
        {         
          ok=true;
          break;
        }
      } 
      
      if(ok)
      {
         alert('yes');
      }
      else
      {
         alert('no');
      }   
     
      return false;      
    }
    
   //copy to 
    function Button5_Click()
    {      
      if(!document.getElementById)
      {
        return true;
      }
      var itemtexts=new Array();
      var itemvalues=new Array();
      var listBox=document.getElementById("ListBox1");
        
      for(var i=0;i<listBox.options.length;i++)
      {
        itemtexts[i]=listBox.options[i].text;
        itemvalues[i]=listBox.options[i].value;
      }
 
      var listBox2=document.createElement("select");
       
       var newOption=null;
      for(var i=0;i<itemtexts.length;i++)
      {
         newOption=document.createElement("OPTION");
         newOption.text=itemtexts[i];
         newOption.value=itemvalues[i];
         listBox2.add(newOption);
      }   
      
      var parent=listBox.parentElement;    
      parent.insertBefore(listBox2,listBox);
      return false;      
    }
    
    //总共几项
    function Button6_Click()
    { 
        if(!document.getElementById)
        {
          return true;
        }
         var listBox=document.getElementById("ListBox1");
        alert(listBox.options.length);      
        return false;      
    }
    
     //根据text查找    
    function Button7_Click()
    { 
        if(!document.getElementById)
        {
          return true;
      }
        var listBox=document.getElementById("ListBox1");
        var txtBox1=document.getElementById("TextBox1");
        var ok=false;
        
        for(var i=0;i<listBox.options.length;i++)
        {
          if(listBox.options[i].text==txtBox1.value)
          {
            alert(listBox.options[i].text+":"+listBox.options[i].value);
            ok=true;
            break;
          }
        }
           
           if(!ok)
           {
           alert("没找到");
          }
        return false;      
   }
       
    //根据value查找    
    function Button8_Click()
    { 
        if(!document.getElementById)
        {
          return true;
        }
        var listBox=document.getElementById("ListBox1");
        var txtBox2=document.getElementById("TextBox2");
        var ok=false;
        
        for(var i=0;i<listBox.options.length;i++)
        {
          if(listBox.options[i].value==txtBox2.value)
          {
            alert(listBox.options[i].text+":"+listBox.options[i].value);
            ok=true;
            break;
          }
        }
           
          if(!ok)
           {
           alert("没找到");
           }
       return false;      
    }
    
    //返回要找值的索引    
   function Button9_Click()
    { 
        if(!document.getElementById)
        {
          return true;
       }
        var listBox=document.getElementById("ListBox1");
        var txtBox2=document.getElementById("TextBox2");
        var ok=false;
       
        for(var i=0;i<listBox.options.length;i++)
        {
          if(listBox.options[i].value==txtBox2.value)
         {
            alert("索引是"+i);
            ok=true;
            break;
         }
        }
           
           if(!ok)
          {
           alert("没找到");
           }
        return false; 
}
    
      //插入元素
    function Button10_Click()
   { 
        if(!document.getElementById)
        {
          return true;
        }
        var listBox=document.getElementById("ListBox1");
        var newOption=document.createElement("option");
        newOption.text=document.getElementById("TextBox3").value;
       newOption.value=document.getElementById("TextBox4").value;  
       
       //填加新元素后再与要插入位置的元素交换 
       listBox.add(newOption);
      var firstchild=listBox.options[0];
      var text=firstchild.text;
      var value=firstchild.value;
       
       firstchild.text=newOption.text;
       firstchild.value=newOption.value;
      
       newOption.text=text;
       newOption.value=value;
             
        return false;      
    }
    
      //删除元素
    function Button12_Click(i)
    { 
        if(!document.getElementById)
       {
          return true;
        }      
        var listBox=document.getElementById("ListBox1");
       listBox.remove(i); 
        return false;      
    }
    
    //选择元素
    function Button13_Click()
    { 
        if(!document.getElementById)
       {
          return true;
        }      
                
        var listBox=document.getElementById("ListBox1");
        for(var i=0;i<listBox.options.length;i++)
        {
          if(listBox.options[i].selected)
          {
            alert(listBox.options[i].text+":"+listBox.options[i].value);
            break;
          }
         }  
       
        return false;      
    }    
    //修改元素
    function Button14_Click()
    { 
        if(!document.getElementById)
       {
          return true;
        }              
       var listBox=document.getElementById("ListBox1");
       for(var i=0;i<listBox.options.length;i++)
       {
        if(listBox.options[i].selected)
         {
           listBox.options[i].text=document.getElementById("TextBox3").value;
           listBox.options[i].value=document.getElementById("TextBox4").value;
           break;
         }
       }     
       
        return false;      
    }
    
// --></mce:script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div>
            <asp:ListBox ID="ListBox1" runat="server" Height="152px" Width="56px">
                <asp:ListItem Value="0">张三</asp:ListItem>
                <asp:ListItem Value="1">李四</asp:ListItem>
                <asp:ListItem Value="2">王五</asp:ListItem>
                <asp:ListItem Value="3">赵六</asp:ListItem>
                <asp:ListItem Value="4">王七</asp:ListItem>
            </asp:ListBox>
            <br />
            <br />
            oldText   
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
            oldValue 
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
            <br />
            newText 
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
            newValue<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br />
            <br />
            <asp:Button ID="Button1" runat="server" OnClientClick ="return Button1_Click();" Text="新增" /><br />
            <asp:Button ID="Button3" runat="server" OnClientClick="return Button3_Click();" Text="清除" /><br />
            <asp:Button ID="Button4" runat="server" OnClientClick="return Button4_Click();" Text="Contains" /><br />
            <asp:Button ID="Button5" runat="server" OnClientClick="return Button5_Click();" Text="copyTo" /><br />
            <asp:Button ID="Button6" runat="server" OnClientClick="return Button6_Click();" Text="count" /><br />
            <asp:Button ID="Button7" runat="server" OnClientClick="return Button7_Click();"  Text="findByText" /><br />
            <asp:Button ID="Button8" runat="server" OnClientClick="return Button8_Click();"  Text="findByValue" /><br />
            <asp:Button ID="Button9" runat="server" OnClientClick="return Button9_Click();" Text="indexOf" /><br />
            <asp:Button ID="Button10" runat="server" OnClientClick="return Button10_Click();" Text="insert" />            <br />
            <asp:Button ID="Button11" runat="server" OnClientClick="return Button11_Click();" Text="remove" />            <br />
            <asp:Button ID="Button12" runat="server" OnClientClick="return Button12_Click(2);" Text="删除第二个" />            <br />
            <asp:Button ID="Button13" runat="server" OnClientClick="return Button13_Click();" Text="选择" />            <br />
            <asp:Button ID="Button14" runat="server" OnClientClick="return Button14_Click();" Text="修改" /><%-- --%></div>
    
    </div>
    </form>
</body>
</html>


本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/xiangyehpu/archive/2009/06/03/4239740.aspx
分享到：
| 获取ListBox被选中项的JavaScript代码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript控制listbox列表框的项目上下移动的方法

    本文实例讲述了JavaScript控制listbox列表框的项目上下移动的方法。分享给大家供大家参考。具体分析如下： 这段JS代码可以控制listbox内的元素向上或者向下移动，这个功能非常有用。下面是详细的代码 代码如下:...

    基于javascript实现listbox左右移动

    基于javascript实现listbox左右移动，是通过编程手段控制HTML页面中的下拉选择框（select元素），使得用户可以通过点击按钮来控制选项项从一个下拉框移动到另一个下拉框中。本文将详细介绍这一过程，并提供一个完整...

    两个listbox同时滚动

    在这个JavaScript例子中，我们为`listBox1`添加了一个`onscroll`事件监听器，当`listBox1`滚动时，它会将自身的`scrollTop`值赋给`listBox2`，实现同步滚动。 此外，为了使效果更佳，我们可能还需要考虑一些额外的...

    js操作listbox

    根据提供的文件信息，我们可以深入探讨JavaScript操作`&lt;select&gt;`元素（通常称为listbox或下拉列表）的方法。这里的关键知识点包括获取选中的值、全选、全删、单选、单删等操作。 ### 一、获取Listbox的选中值 在...

    漂亮的客户端ListBox控件，采用客户端绑定数据源

    此外，还可以添加自定义的JavaScript函数来控制多选行为，例如限制最多可选数量，或者根据某些条件禁用特定选项。 **四、优化用户体验** 为了提升用户交互体验，可以考虑以下几点： 1. **分页显示**：如果数据量...

    listbox添加部分隐藏字符

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

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

    下面是实现上述功能的关键JavaScript函数`listbox_moveacross`： ```javascript function listbox_moveacross(sourceID, destID) { var src = document.getElementById(sourceID); var dest = document....

    仿腾讯左右列表框listbox

    【标题】"仿腾讯左右列表框listbox"指的是在网页设计中实现的一种交互式界面元素，它模仿了腾讯产品中的功能，将两个列表框（通常称为选择框或下拉列表）并排放置，允许用户从左侧列表选择项目，然后将其添加到右侧...

    jquery控制listbox中项的移动并排序的实现代码

    在本文中，我们将深入探讨如何使用jQuery来控制ListBox中的项移动和排序，这对于网页应用程序的交互性至关重要。首先，我们来看一下HTML结构，它包含两个ListBox控件（listall 和 listmy）以及两个按钮（btnleftmove...

    js listbox多选组件

    在这个场景中，"js listbox多选组件"是指使用JavaScript实现的一个Listbox（列表框）控件，该控件允许用户进行多项选择，类似于我们在网页上常见的复选框或下拉列表。在Web开发中，这样的组件通常用于提高用户界面的...

    Listbox:使用html + css + javascript的列表框

    HTML提供基础结构，CSS负责样式美化，而JavaScript则处理用户交互和逻辑控制。在实际项目中，`Listbox-master`可能包含这些文件的源代码，你可以进一步研究和自定义以适应不同的需求。记住，理解和掌握这些技术对于...

    jquery控制listbox中项的移动并排序

    ***服务器控件与客户端脚本的交互：文件中展示了***的服务器控件（ListBox）和客户端脚本（jQuery）之间的交互方式，通过将控件的ID嵌入JavaScript函数中，实现客户端对服务器端控件操作的调用。 综上所述，这份...

    S2SH+JQuery使用对拉框（listbox）实现权限对选控制

    在这个示例中，我们讨论的是如何在基于S2SH（Struts2、Spring、Hibernate）的项目中，结合jQuery库来实现一个权限对选控制功能，主要使用了HTML中的对拉框（listbox）元素。S2SH是一个常见的Java Web开发框架，用于...

    绘制listbox

    在这些环境中，绘制列表框主要涉及设置控件的属性，如Items（存储选项的集合）、SelectionMode（决定用户可以选中一项还是多项）、Appearance（控制列表框的视觉样式）等。此外，还可以使用事件处理程序，如...

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

    总结来说，***中的ListBox控件提供了强大的功能来实现用户交互，结合JavaScript和后端C#代码可以实现复杂的用户选择逻辑。需要注意的是，上述代码片段中包含了一些未定义的部分（例如某些函数和变量），这可能是文档...

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

    在文档中，引用Bootstrap Dual Listbox的CSS和JavaScript文件被明确指出。首先，我们需要引入Bootstrap的CSS和JavaScript文件，这通常可以在Bootstrap的官方网站找到。其次，需要引入Bootstrap Dual Listbox的CSS...

    各类常用代码

    使用JavaScript为ListBox动态添加选项可以通过创建`&lt;option&gt;`元素并将其添加到ListBox中实现。例如： ```javascript let listBox = document.getElementById('listAccount'); let option = document.createElement(...

Magicbox
Global site tag (gtag.js) - Google Analytics