checkboxlist 下拉框多選功能

阿新 • • 發佈：2019-01-21

點選文字框，彈出一個下拉框，實現多選功能。

先看下效果圖：

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程式碼片段。  <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

checkboxlist 下拉框多選功能

相關推薦