c# 下拉多选的实现

1.首先是个TextBox

<asp:TextBox ID="txtREFERRINGDOC" Width="130" runat="server" CssClass="txt" onfocus="this.blur();"
onclick="showDiv(‘divREFERRINGDOC‘,‘txtREFERRINGDOC‘);">▼</asp:TextBox>

2.在TextBox上注册一个点击事件用来显示下拉框如下:

function showDiv(divID, txtID) {
var oSelect = document.getElementById(divID);
var oText = document.getElementById(txtID);
if (oSelect != null) {
var xy = divPosition(oText);
if (oSelect.style.display == "block") { oSelect.style.display = "none"; }
else if (oSelect.style.display == "none") {
oSelect.style.position = "absolute";
oSelect.style.left = xy.x + 1 + "px";
oSelect.style.top = (xy.y + document.getElementById(txtID).offsetHeight+3) + "px";
oSelect.style.display = "block";
}
}
}

3.下拉多选框

<div id="divREFERRINGDOC" onmouseleave="javascript:showDiv(‘divREFERRINGDOC‘,‘txtREFERRINGDOC‘);"
style=" height: 300px; width:130px;background-color: #fff; display: none; z-index: 9998px; border-left: solid 1px #B6D3FB;
border-right: solid 1px #B6D3FB; border-bottom: solid 1px #B6D3FB;overflow-y: auto">
<!--防止div被select挡住-->
<iframe style="position: absolute; z-index: -1; width: 100%; height: 100%; top: 0;
left: 0; scrolling: no;" frameborder="0"></iframe>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>

<asp:CheckBoxList Width="130px" onclick="javascript:setTextValue(event,‘cblREFERRINGDOC‘,‘txtREFERRINGDOC‘);"
CellPadding="0" CellSpacing="0" ID="cblREFERRINGDOC" runat="server">
</asp:CheckBoxList>
</ContentTemplate>
</asp:UpdatePanel>
</div>

4.给下拉多选框注册事件---把选中的值赋值给TextBox如下

function setTextValue(e, cblID, txtID) {
var o = document.getElementById(cblID);
var oText = document.getElementById(txtID);
var oinput = document.getElementsByTagName("input");
oText.value = oText.value.replace("▼", "");
var oTemp = oText.value;
var eID = e.srcElement.id;
if (eID == null || eID == "") { return; } //点空白
var oe = document.getElementById(eID);

//选中的全部选项
if (oe != null && oe.nextSibling.innerText == "全部")
{
checkAll(oe, cblID, txtID);
return;
}
//选中
for (var i = 0; i < oinput.length; i++) {
var vid = oinput[i].id;
if (vid.indexOf(o.id) != -1 && vid == e.srcElement.id) {
var o1 = document.getElementById(vid);
if (o1.checked) {
if (oText.value.indexOf(o1.nextSibling.innerText) == -1) {
if (oText.value.length > 0) { oText.value += "," + o1.nextSibling.innerText; }
else { oText.value += o1.nextSibling.innerText; }
}
} else {
oTemp = oTemp + ",";
if (oText.value.indexOf(o1.nextSibling.innerText) != -1) { oText.value = oTemp.replace(o1.nextSibling.innerText + ",", ""); }
if (oText.value.length > 0) { oText.value = oText.value.substr(0, parseInt(oText.value.length) - 1); }
}
}
}
oText.value += "▼";
}

function checkAll(oAll, cblID, txtID) {
var o = document.getElementById(cblID); //医院列表
var oText = document.getElementById(txtID); //医院名称
var oinput = document.getElementsByTagName("input");
oText.value = oText.value.replace("▼", "");
var oTemp = oText.value;
for (var i = 0; i < oinput.length; i++) {

var vid = oinput[i].id;
if (vid.indexOf(o.id) != -1) {
var vid = oinput[i].id;
var o1 = document.getElementById(vid);
var o1Text = o1.nextSibling.innerText;
o1.checked = oAll.checked;
if (o1.checked && o1Text != "全部") {
if (oTemp.indexOf(o1Text) == -1) {
if (oTemp.length > 0)
{
oTemp += "," + o1Text;
}

else {
oTemp += o1Text;
}
}
} else {
oTemp = oTemp + ",";
if (oTemp.indexOf(o1Text) != -1) {
oTemp = oTemp.replace(o1Text + ",", "");
}
if (oTemp.length > 0) {
oTemp = oTemp.substr(0, parseInt(oTemp.length) - 1);
}

}
}
}

if (oAll.checked == false) {
oTemp = "";
}
oText.value = oTemp + "▼";
}

5.后台CheckBox绑定扩展方法

/// <summary>
/// CheckBoxList绑定
/// </summary>
/// <param name="cbl"></param>
/// <param name="dt"></param>
/// <param name="TextFeildName"></param>
/// <param name="ValueFeildName"></param>
/// <param name="bNeedAll"></param>
public static void BindDataTable(this CheckBoxList cbl, DataTable dt, string TextFeildName, string ValueFeildName, bool bNeedAll, TextBox textbox)
{
if (dt == null) return;

cbl.DataSource = dt;
cbl.DataTextField = TextFeildName;
cbl.DataValueField = ValueFeildName;
cbl.DataBind();

if (bNeedAll) { cbl.Items.Insert(0, new ListItem("全部", "All")); }

if (textbox != null)
{
textbox.Text = "▼";
}
}
时间: 2024-10-10 14:36:57

c# 下拉多选的实现的相关文章

JS下拉复选框的实现

<html>   <head>     <script src="jquery-1.7.2.min.js"></script>     <script src="jquery.easyui.min.js" ></script>     <link   rel="stylesheet" href="css/themes/metro/easyui.css"

下拉多选

文件见附件: 使用方法: 1.前台代码 <%--下拉列表 --%> <link href="../Styles/jquery-ui.css" rel="stylesheet" type="text/css" /> <link href="../Styles/jquery.multiselect.css" rel="stylesheet" type="text/css&

angular2.x 下拉多选框选择组件

angular2.x - 5.x 的下拉多选框选择组件 ng2 -- ng5.最近在学angular4,经常在交流群看见很多人问 下拉多选怎么做... 今天就随便写的个. 组件源码 百度云   链接:https://pan.baidu.com/s/1dEHwKmt 密码: mhta 下面贴代码: 界面 引用  selectList  是 下拉框的数据列表 redSelList() 方法是获取 选择完成后的数据 <app-select-checkbox [itemList]="selectL

自己用ul模拟实现下拉多选框,

模拟实现下拉多选框 效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="../js/plugins/layui/css/lay

关于knockout下拉多选值的应用

在最近的开发过程中,应用了一些关于knockout的下拉项目. 关于下拉多选的开发在这里做一个记录. 下面直接上代码 添加的时候,无需给初始值 --viewmodel function ViewModel() { //岗位下拉绑定 this.postName = ko.observableArray([]); }; 添加了一个触发.根据部门获得对应的岗位 //根据部门ID去获得对应的岗位下拉选项 function jsSearchData(obj) { var depId = $(obj).va

自定义实现 PyQt5 下拉复选框 ComboCheckBox

一.前言 由于最近的项目需要具有复选功能,但过多的复选框会影响界面布局和美观,因而想到把 PyQt5 的下拉列表和复选框结合起来,但在 PyQt5 中并没有这样的组件供我们使用,所以想要自己实现一个下拉复选框,主要就是继承 QComboBox 类,然后将复选框 QCheckBox 加入其中,并实现相应的功能. 最终实现的下拉复选框效果如下: 二.代码实现 1.主要方法 在 PyQt5 中,有几个主要的方法需要了解一下,方法名称和对应的含义如下: QtWidgets.QComboBox.setVi

selectpicker下拉多选框ajax异步或者提前赋值=》默认值

Bootstrap select多选下拉框赋值 success: function (data) { var oldnumber = new Array(); $.each(data, function (i) { oldnumber.push(data[i].id); }); $('#editcolor .selectpicker').selectpicker('val', oldnumber);//默认选中 $('#editcolor .selectpicker').selectpicker

Mutiselect下拉复选框(保存和设置默认选中项)

HTML代码 <asp:DropDownList ID="ddlWarehouseIds" runat="server" CssClass="ddl"></asp:DropDownList> <input type="hidden" name="<%#Eval("WarehouseNames")%>" id="hid_<%#Eva

多选下拉框(select 下拉多选)

方法一:使用multiple-select.js和multiple-select .css实现 HTML代码: <select id='checkedLevel' style="width:120px;height:28px;" multiple="multiple"> <option value="1">选项1</option> <option value="2">选项1<