mutiselect的简单Demo - HtmlSelect模式

2017-02-07 20:47:18 访问(2478) 赞(0) 踩(0)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="WebForms_WebPages_Mutiselects_v1_Default" ValidateRequest="false" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>mutiselect的简单Demo - HtmlSelect模式_<%=WebTitle %></title>
    <script src="<%=strPhyPath%>/JS/jquery-1.8.2.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="<%=strPhyPath%>/Themes/mutiselect/multiselectSrc/jquery.multiselect.css" />
    <link rel="stylesheet" type="text/css" href="<%=strPhyPath%>/Themes/mutiselect/ui/jquery-ui.min.css" />
    <script type="text/javascript" src="<%=strPhyPath%>/Themes/mutiselect/ui/jquery-ui.min.js"></script>
    <script type="text/javascript" src="<%=strPhyPath%>/Themes/mutiselect/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="<%=strPhyPath%>/Themes/mutiselect/multiselectSrc/jquery.multiselect.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {

            // 缺省设置选中1,2的方法一 //
            // $("#<%=lb_Item.ClientID%> option[value=1] ").attr("selected", true);
            // $("#<%=lb_Item.ClientID%> option[value=2] ").attr("selected", true);

            MultiselectSetValue();

            $("#<%=lb_Item.ClientID%>").multiselect({
                selectedList: 2
            });


        });

        // 设置选中1,2的方法二 //
        function MultiselectSetValue() {

            var v = '1,2'//这个为保存的值，自己从数据库读取来赋值给v变量
            v = ',' + v + ',';//添加分隔符号，好indexOf进行比较

            $('#<%=lb_Item.ClientID%> option').each(function () {
                if (v.indexOf(',' + this.value + ',') != -1) {
                    this.selected = true;
                }
            });

            $("#<%=lb_Item.ClientID%>").multiselect({
                selectedList: 2
            });

            return false;
        }

        function MultiselectGetValue() {

            // 获得选中的值 //
            var theValue = $("#<%=lb_Item.ClientID%>").val();

            $("#<%=txt_Output.ClientID%>").val(theValue);
            return false;
        }
 

     </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>mutiselect的简单Demo - HtmlSelect模式</h1>
            普通控件效果：<select id="lb_Normal" multiple="true" runat="server" /><br /><br />
            mutiselect效果：<select id="lb_Item" multiple="true" runat="server" /><br /><br />
            <asp:Button ID="btn_Save" runat="server" Text="取值" OnClientClick="return MultiselectGetValue();"  />
            取值内容：<asp:TextBox ID="txt_Output" runat="server" ></asp:TextBox>
        </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class WebForms_WebPages_Mutiselects_v1_Default 
    : 
    PageBase
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            lb_Item.Items.Add(new ListItem("one", "1"));
            lb_Item.Items.Add(new ListItem("two", "2"));
            lb_Item.Items.Add(new ListItem("three", "3"));
            lb_Item.Items.Add(new ListItem("four", "4"));
            lb_Item.Items.Add(new ListItem("five", "5"));


            lb_Normal.Items.Add(new ListItem("one", "1"));
            lb_Normal.Items.Add(new ListItem("two", "2"));
            lb_Normal.Items.Add(new ListItem("three", "3"));
            lb_Normal.Items.Add(new ListItem("four", "4"));
            lb_Normal.Items.Add(new ListItem("five", "5"));
        }
    }
 
}