checkboxlist 下拉框多選功能
點選文字框,彈出一個下拉框,實現多選功能。
先看下效果圖:
HTML頁:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>下拉框實現多選</title> <script src="Jquery-1.8.3.min.js" type="text/javascript"></script> <script type="text/javascript"> /* 說明:由於CheckBoxList 值是在後臺繫結的,前臺沒有設定value,所有當用js取checkbox的value值時,預設都為on。 在後臺可以正常訪問,解決方案:暫無。 */ $(function() { $("#txtList").mouseenter(function() { $("#divChkList").slideDown("fast"); }); $("#divMulti").mouseleave(function() { $("#divChkList").slideUp("fast"); }); $("#divChkList :checkbox").each(function() { $(this).click(function() { var $txtList = $("#txtList"); if (this.checked) { $txtList.val($txtList.val() + $(this).next().text()+","); } else { $txtList.val($txtList[0].value.replace($(this).next().text()+',','')); } }); }); }); </script> </head> <body> <form id="form1" runat="server"> <input type="checkbox" id="test" value="1" title="d" /> <div style="width:400px;height:300px;margin:0 auto;"> <div id="divMulti"> <asp:TextBox ID="txtList" runat="server" Width="100px"></asp:TextBox> <div id="divChkList" style="display: none; border: solid 1px #CCCCCC; position: fixed; z-index: 100; height: 160px; width: 100px; overflow-y: scroll; background-color: White"> <asp:CheckBoxList ID="chkList" runat="server" RepeatLayout="Table" RepeatDirection="Vertical"> </asp:CheckBoxList> </div> </div> </div> </form> </body> </html>
cs 程式碼:
public partial class multiSelect : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { DataTable dt = new DataTable(); dt.Columns.Add("Name", typeof(string)); dt.Columns.Add("Age", typeof(string)); for (int i = 0; i < 4; i++) { DataRow row = dt.NewRow(); row[0] = "N" + i; row[1] = "V" + i; dt.Rows.Add(row); } this.chkList.DataSource = dt; this.chkList.DataTextField = "name"; this.chkList.DataValueField = "age"; this.chkList.DataBind(); } } }
原始碼下載地址:
相關推薦
checkboxlist 下拉框多選功能
點選文字框,彈出一個下拉框,實現多選功能。 先看下效果圖: HTML頁: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>下拉框
angularJs實現下拉框多選
IV 幹貨 text 註意 解釋 config del 是你 CA 話不多說,直接上幹貨。 肯定需要下拉選插件。必須引入的是 註意 先後順序 select2.css select2-bootstrap.css select2.min.js angular.mi
combotree下拉框多選
var dataJson = "["; dataJson += "{\"id\":\"all\",\"text\":\"全部\",\"checked\":true" + ",\"chi
【已解決】如何做excel表的下拉框多選
最近因為專案需求,要製作一個excel匯入的模板,模板中要求某幾列的下拉框是多選的。。不得不臨時研究了一下vba。其間各種心酸不多說。。。。。。 首先,這個是需要啟用巨集,在vb編輯器裡寫程式碼,所以你要確保你的excel是可以啟用巨集的。如果是正式版的office是可以直接用(破解版就不知道了
EasyUI實現combobox下拉框多選以及取值
實現combobox下拉框多選的樣式如下,選中的資料底色為高亮黃色顯示,並會在輸入框中進行顯示,中間以“,”號分隔。 HTML程式碼: <input class="easyui-combobo
select 下拉框多選,用select代替checkbox
演示:http://www.freejs.net/demo/524/index.html<select class="demo" multiple="multiple"> <optgroup label="Languages">
關於easyUI的combbobox下拉框多選時,後臺獲取下拉框的值獲取的問題
在使用easyUI的combobox時,當引數裡設定為multiple:true時,下拉框可以選擇多個, js程式碼 <pre name="code" class="javascript">$('#cc').combobox({ panelHeight:'
Dorado下拉框多選(ListDropDown)
最終樣式如下圖: 這裡是通過ListDropDown下拉框做出的效果。 1.在ListDropDown的Entity屬性新增下拉內容。並且設定紅色框的屬性為false 該控制元件的onClose事
jquery multiselect如何實現下拉框多選並獲取多個選項的值
今天做專案遇到了一個需要用多選框實現多選功能、並將多選框的值傳到後臺實現插入一張表的問題,最開始一直在想用複選框實現多選功能,後來發現做起來頁面不好看,最後在網上查資料,想找到一種方便使用的外掛,最後選擇了multiselect這個外掛。 首先簡單說下我要實
實現下拉選單多選框效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <li>工作意願地: <%-- <c:forEach items="${list}" var="lis
POI 多選下拉選單(複選框) 匯出Excel模板 下拉選單單選,下拉選單多選
最近公司要做Excel的模板匯出,匯入資料的工作,匯出時還要動態生成模板,並且生成單選下拉選單,和多選下拉選單。開始搞這個很快除了多選的都搞定了,就是多選卡住了。弄了很久。。。最後終於在和多方面的交流下成功弄出。之前在網上找不到方法很是頭疼,現在弄出來分享一下給大家。。歡迎指
WPF 組織機構下拉樹多選
展開 AC this () .info esp obj fault -name XAML代碼: <UserControl x:Class="SunCreate.CombatPlatform.Client.MultiSelOrgTree"
基於bootstrap selectpicker ,實現select下拉框模糊查詢功能
sele TP 選擇器 art 基於 i++ 同時 html .html 1、html代碼塊 需要引入bootstrap的css js jquery bootstrap.css bootstrap-select.min.css jquery-
select下拉框實現輸入功能
select下拉框一般來說只能進行選擇,然而很多應用場景需要支援既能選擇也能輸入的功能。下邊是自己整理的html和js程式碼片段。 <!--HTML片段--> <td> <c:forEach items="${qt009List }" var="list
固定定位下拉框點選自動回到頁面問題解決
點選下拉框時頁面自動回到頂部。 <dl id="sample" class="dropdown nav-text-select">
記一次後端開發者,如何完成前端下拉框三級聯動功能?
前言 下拉框三級聯動這個對於我們大家都很常見,經常在註冊一些資訊的時候,需要選取省市縣等資訊,我需要完成的就是這個功能。 但是無奈這個專案沒有前端開發,而我是一個~專注夾克20年~咦,勁霸男裝?哦~不,是專注後端開發5年~早期學習的jquery,還能記起的常用方法不多了~就知道$("#id")~~~ 但
jQuery的select2下拉框的搜尋功能(使用select2外掛,方便簡單)
第一步: 引入我們用使用的外掛 jquery: select2: css: js: 第二步: 建立一個html頁面,body內容: <div> <select class="singleSelect" style="width: 200px;">
vue實現下拉列表多選全選以及模糊查詢的vue元件
前端,有時有這樣的需求,需要一個下拉列表,還要有多選全選功能,以及模糊查詢功能的vue元件,我做了一個簡陋的元件,供大家參考,有問題請留言 這是我的檔案目錄結構 ** 效果圖: o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_
bootstrap multiselect下拉列表多選元件[轉載]
轉載地址:http://www.cnblogs.com/landeanfen/p/7457283.html 閱讀目錄 一、元件開源地址以及API說明 二、元件效果示例 三、使用示例 1、基礎示例 2、其他效果示例 3、元件取
C#---ASP頁面的下拉框模糊查詢功能
基礎方法支援: 一. DataTable 轉換成 Json 換句話說如何在ASP.NET將一個DataTable序列化為 Json陣列,或者如何從一個DataTable返回一個Json字串。 使用 JavaScriptSerializer. 首先我們新增System