<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多选下拉框,实现多选。点击显示下拉。 <script type="text/javascript"> <!-- function $(e){return document.getElementById(e) ;} $('btnSelect').onclick = function () { //§ó§ï?? $('status')....
纯JS控制实现多选拉下框并且带全模糊查询,不是首字母查询,打勾多选并带回隐藏值,非常实用!!
原生select实现多选功能
在JavaScript编程中,"js实现多选多列选择"是一个常见的需求,特别是在构建交互式的Web应用时。这种功能常用于创建复杂的选择器,比如多选的下拉框或者表格,可以提升用户界面的效率和用户体验。下面将详细介绍如何...
在Bootstrap中实现多选下拉框可以极大提升用户体验,使得用户在有限的空间内可以选择多个选项。以下是如何使用Bootstrap来创建这样一个功能的详细步骤。 首先,确保你已经在你的项目中引入了Bootstrap的相关资源。...
在这个场景中,"js实现的多选城市"是指使用JavaScript技术来创建一个功能,允许用户在选择多个城市时实现级联效果。级联城市通常指的是当用户在一个下拉框中选择一个特定的城市后,另一个下拉框会自动更新,显示与所...
使用javascript实现多选,使用方法可参考网址:https://blog.csdn.net/qq_39579290/article/details/126847485
然而,对于需要用户选择多个值的场景,我们可以实现多选功能的`dropdownlist`。本文将深入探讨如何在Web应用程序中实现多选下拉框,并提供相关技术细节。 ### 多选下拉框的基本概念 多选下拉框,又称为多选列表框...
实现多选列表框的 添加,移除,全部移除,方便多个选项的同时操作.
DTree(通常指的是JavaScript实现的树形控件)允许用户通过勾选节点来实现多选功能,提升了用户在大量数据中的选择效率。以下将详细介绍dtree实现多选树的核心知识点: 1. **DHTML与JavaScript基础**:DTree基于...
本主题将深入探讨如何使用JavaScript库,尤其是jQuery和Bootstrap,来实现这种功能。`bootstrap-select`是Bootstrap框架的一个插件,专门用于增强原生HTML下拉框的样式和功能。 首先,让我们了解基础的...
本篇文章将详细讲解如何在不同的编程语言和环境中使用复选框来实现多选功能。 一、复选框的基本概念 复选框通常表示一个可独立选择的状态,用户可以通过勾选或取消勾选来切换其状态。在多选场景下,用户可以选择一...
首先,原生的HTML `<select>` 元素只支持单选,如果要实现多选,我们需要借助`<select multiple>`属性,但其样式通常难以自定义。因此,开发者常选择用div来模拟下拉框的外观,通过JavaScript处理用户的交互行为,...
1. 按Ctrl 选中不连续的 2. 按shift 选中连续的
JavaScript(简称js)作为客户端脚本语言,常被用来增强网页的交互性,其中包括实现多选下拉框的功能。本文将深入探讨如何使用JavaScript来创建和操作多选下拉框。 首先,HTML基础是构建多选下拉框的起点。一个基本...
要实现多选,我们需要使用`<select>`标签的`multiple`属性,如下所示: ```html 选项1 选项2 ... ``` 这个基本结构可以让用户在下拉框中选择多个选项。然而,为了提供更好的用户体验和更丰富的样式,我们通常...
总的来说,理解和实现js多级联动多选checkbox插件涉及了JavaScript的多个核心概念,包括DOM操作、事件处理、数据结构、UI更新、性能优化以及模块化开发等。通过学习和实践,开发者可以创建出功能强大且易于使用的...
当我们希望实现多选功能时,就需要利用`<select>`的一些特定属性和方法。本篇文章将深入探讨如何在HTML、CSS以及JavaScript中实现`<select>`的多选特性。 ### HTML基础 在HTML中,`<select>`元素有一个名为`...
本教程将深入探讨如何使用jQuery和JavaScript来创建一个日期多选控件。 一、日期选择器基础 在JavaScript中,我们经常使用内置的Date对象来处理日期。Date对象允许我们创建、格式化和比较日期。例如,创建一个新...
安装完成后,我们可以通过简单的jQuery代码实现多选下拉框的功能。例如: ```html <option value="value1">Option 1 <option value="value2">Option 2 <option value="value3">Option 3 $(document).ready...