`
codsoul
  • 浏览: 212873 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

(转)js实现多选

 
阅读更多
<title>无标题页</title>
    <script  type="text/javascript" src="pageScript.js"> </script>
    <script type="text/javascript">
   function open1(hiden){
       window.open("sub.aspx?hiden="+hiden,"newwindow","height=100,width=200,top=200,left=300");
    }
    //清除选择项
function Cel(_Value,showText,showValue)
{
    var Array_value = document.getElementById(showValue).value.split("|");
    var Array_text = document.getElementById(showText).innerHTML.split("|");
    var existed = 0;
    for(i=0;i < Array_value.length;i++){
      //  if(_Value.replace(/_/ig,"-")==Array_value[i].replace(/_/ig,"-"))
        {
            Realign(i,showText,showValue);
            break;
        }
    }
}
//重新排列选项
function Realign(value,showText,showValue){
    var Array_value = document.getElementById(showValue).value.split("|");
    var Array_text = document.getElementById(showText).innerHTML.split("|");
    Array_text[value]="";
    Array_value[value]="";
    document.getElementById(showText).innerHTML = "";
    document.getElementById(showValue).value = "";
    for(j=0;j<Array_text.length;j++){
        if(Array_text[j]!="")
            document.getElementById(showText).innerHTML +=Array_text[j]+"|";
    }
    for(e=0;e<Array_value.length;e++){
        if(Array_value[e]!="")
            document.getElementById(showValue).value +=Array_value[e]+"|";
    }
}
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="tb_usePeople" runat="server" Text="Label"></asp:Label>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <asp:HiddenField ID="HF_Value" runat="server" />
    </div>
    </form>
</body>
</html>

protected void Page_Load(object sender, EventArgs e)
    {
        //初始化有多少人
        string value = "";
        if(HF_Value.Value!=null)
            value=HF_Value.Value;
        if (!IsPostBack)
        {
            value = "qq|ww|yy|";
            HF_Value.Value = value;
        }
        tb_usePeople.Text = GetUsers(value, "tb_usePeople", "HF_Value");
            Button1.Attributes.Add("onclick","javascript:open1('"+value+"')");
    }
    public String GetUsers(string strid, string ctl_Text, string Ctl_Value)
    {
        string[] Arrayid = strid.Split('|');
        string manageList = "";
        if (Arrayid.Length > 0)
        {
            for (int i = 0; i < Arrayid.Length - 1; i++)
            {
                if (Arrayid[i].ToString() != "")
                {
                    string strUrl = "<a href='#'onclick='Cel(/"" + Arrayid[i].ToString() + "/",/"" + ctl_Text + "/",/"" + Ctl_Value + "/")'><img id='image' src='bs.jpg' alt='取消'/></a>";
              
                    manageList += Arrayid[i].ToString() + strUrl + "|";
                }
            }
        }
        else{
        manageList="";
        }
        return manageList;
    }

  <title>无标题页</title>
    <script>
   
    //向母页传输信息,多项选择
    function ReturnValue(_text,_value){
   
   
    var showtext="tb_usePeople";
    var showvalue=opener.document.getElementById("HF_Value").value;
    var strUrl=  "<a href='#'onclick='Cel(/"" + _value + "/",/"" +showtext + "/",/"HF_Value/")'>";
                strUrl+="<img id='image' src='bs.jpg' alt='取消'><a/>";
      
       if(opener!=null)
       {
      
       if(showtext!="")
       {
       var begin=0;
       var Array_value=showvalue.split("|");
       for(e=0;e<Array_value.length;e++)
          { 
          if(Array_value[e]!="")
          if(Array_value[e]==_value){
          begin=1;
          break;}
          }
          if(begin==0)
          {
          if(_text!="")
          opener.document.getElementById("tb_usePeople").innerHTML+=_text+strUrl+"|";
          if(_value!="")
          {
          opener.document.getElementById("HF_Value").value+=_value+'|';
          }
          }
          else{alert(_text+"已被选择!");}
       }
      
       }
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a href="#" onclick="ReturnValue('haha','haha')">haha</a><br />
     <a href="#" onclick="ReturnValue('nana','nana')">nana</a><br />
      <a href="#" onclick="ReturnValue('qw','qw')">qw</a><br />
      <asp:HiddenField ID="ShowValue" runat="server"/>
    </div>
    </form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
    {
        ShowValue.Value = Request.QueryString["hiden"].ToString();
    }

分享到:
评论

相关推荐

    JS多选下拉框_实现多项选择

    JS多选下拉框,实现多选。点击显示下拉。 &lt;script type="text/javascript"&gt; &lt;!-- function $(e){return document.getElementById(e) ;} $('btnSelect').onclick = function () { //§ó§ï?? $('status')....

    纯js实现多选下拉框并模糊查询.html

    纯JS控制实现多选拉下框并且带全模糊查询,不是首字母查询,打勾多选并带回隐藏值,非常实用!!

    原生select实现多选功能

    原生select实现多选功能

    js实现多选多列选择

    在JavaScript编程中,"js实现多选多列选择"是一个常见的需求,特别是在构建交互式的Web应用时。这种功能常用于创建复杂的选择器,比如多选的下拉框或者表格,可以提升用户界面的效率和用户体验。下面将详细介绍如何...

    使用bootstrap实现多选下拉框

    在Bootstrap中实现多选下拉框可以极大提升用户体验,使得用户在有限的空间内可以选择多个选项。以下是如何使用Bootstrap来创建这样一个功能的详细步骤。 首先,确保你已经在你的项目中引入了Bootstrap的相关资源。...

    js实现的多选城市

    在这个场景中,"js实现的多选城市"是指使用JavaScript技术来创建一个功能,允许用户在选择多个城市时实现级联效果。级联城市通常指的是当用户在一个下拉框中选择一个特定的城市后,另一个下拉框会自动更新,显示与所...

    使用javascript实现多选

    使用javascript实现多选,使用方法可参考网址:https://blog.csdn.net/qq_39579290/article/details/126847485

    dropdownlist下拉框实现多选

    然而,对于需要用户选择多个值的场景,我们可以实现多选功能的`dropdownlist`。本文将深入探讨如何在Web应用程序中实现多选下拉框,并提供相关技术细节。 ### 多选下拉框的基本概念 多选下拉框,又称为多选列表框...

    javascript 实现多选列表框效果

    实现多选列表框的 添加,移除,全部移除,方便多个选项的同时操作.

    dtree实现的树支持多选

    DTree(通常指的是JavaScript实现的树形控件)允许用户通过勾选节点来实现多选功能,提升了用户在大量数据中的选择效率。以下将详细介绍dtree实现多选树的核心知识点: 1. **DHTML与JavaScript基础**:DTree基于...

    JQ JS javascript 多选 多选下拉框 select bootstrap-select

    本主题将深入探讨如何使用JavaScript库,尤其是jQuery和Bootstrap,来实现这种功能。`bootstrap-select`是Bootstrap框架的一个插件,专门用于增强原生HTML下拉框的样式和功能。 首先,让我们了解基础的...

    用Check Box实现多选

    本篇文章将详细讲解如何在不同的编程语言和环境中使用复选框来实现多选功能。 一、复选框的基本概念 复选框通常表示一个可独立选择的状态,用户可以通过勾选或取消勾选来切换其状态。在多选场景下,用户可以选择一...

    下拉框多选 js动态实现

    首先,原生的HTML `&lt;select&gt;` 元素只支持单选,如果要实现多选,我们需要借助`&lt;select multiple&gt;`属性,但其样式通常难以自定义。因此,开发者常选择用div来模拟下拉框的外观,通过JavaScript处理用户的交互行为,...

    JavaScript通过Ctrl和Shift键的实现多选

    1. 按Ctrl 选中不连续的 2. 按shift 选中连续的

    js多选下拉框多选下拉框多选下拉框

    JavaScript(简称js)作为客户端脚本语言,常被用来增强网页的交互性,其中包括实现多选下拉框的功能。本文将深入探讨如何使用JavaScript来创建和操作多选下拉框。 首先,HTML基础是构建多选下拉框的起点。一个基本...

    一个简单的实现多选的下拉框

    要实现多选,我们需要使用`&lt;select&gt;`标签的`multiple`属性,如下所示: ```html 选项1 选项2 ... ``` 这个基本结构可以让用户在下拉框中选择多个选项。然而,为了提供更好的用户体验和更丰富的样式,我们通常...

    js多级联动多选checkbox插件

    总的来说,理解和实现js多级联动多选checkbox插件涉及了JavaScript的多个核心概念,包括DOM操作、事件处理、数据结构、UI更新、性能优化以及模块化开发等。通过学习和实践,开发者可以创建出功能强大且易于使用的...

    select 实现多选

    当我们希望实现多选功能时,就需要利用`&lt;select&gt;`的一些特定属性和方法。本篇文章将深入探讨如何在HTML、CSS以及JavaScript中实现`&lt;select&gt;`的多选特性。 ### HTML基础 在HTML中,`&lt;select&gt;`元素有一个名为`...

    JQ JS javascript 日期多选控件

    本教程将深入探讨如何使用jQuery和JavaScript来创建一个日期多选控件。 一、日期选择器基础 在JavaScript中,我们经常使用内置的Date对象来处理日期。Date对象允许我们创建、格式化和比较日期。例如,创建一个新...

    jquery实现的多选下拉框

    安装完成后,我们可以通过简单的jQuery代码实现多选下拉框的功能。例如: ```html &lt;option value="value1"&gt;Option 1 &lt;option value="value2"&gt;Option 2 &lt;option value="value3"&gt;Option 3 $(document).ready...

Global site tag (gtag.js) - Google Analytics