aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="css/chosen.css">
<!--JQuery使用v1.8.2-->
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/chosen.jquery.js"></script>
<script type="text/javascript" src="docsupport/prism.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function () {
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
};
for (var selector in config) {
$(selector).chosen(config[selector]);
};
//$('.chosen-select').chosen().change(function (event) {
$('#<%=DropDownList1.ClientID %>[class="chosen-select"]').chosen().change(function (event) {
var strval = $(this).val();
if (strval == null) { $('#<%=HF_DDL1.ClientID %>').val(''); } else { $('#HF_DDL1').val(strval); };
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
以下為範例<br/>
<select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select" style="width:350px;" tabindex="18" id="multiple-label-example">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
<option selected>Brown Bear</option>
<option>Giant Panda</option>
<option>Sloth Bear</option>
<option>Sun Bear</option>
<option>Polar Bear</option>
<option>Spectacled Bear</option>
</select>
<br/>
<br/>
<asp:DropDownList ID="DropDownList1" runat="server" Width="80%"
CssClass="chosen-select" >
</asp:DropDownList>
<asp:HiddenField ID="HF_DDL1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="送出" />
</div>
</form>
</body>
</html>
aspx.vb
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Dim str_sql As String = String.Empty
str_sql = "select id_no+'-'+rtrim(cname) as html_text,id_no as val from test_staff"
Dim ds As New DataSet()
Using conn As New SqlConnection("Server=.;uid=test;pwd=test;Database=temp_db")
Using command As SqlCommand = New SqlCommand(str_sql, conn)
Using da As New SqlDataAdapter()
da.SelectCommand = command
da.Fill(ds)
End Using
End Using
End Using
DropDownList1.DataTextField = "html_text"
DropDownList1.DataValueField = "val"
DropDownList1.DataSource = ds.Tables(0)
DropDownList1.DataBind()
DropDownList1.Attributes.Add("data-placeholder", "請選擇學生")
DropDownList1.Attributes.Add("multiple", "")
End If
End Sub
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
Dim str_js As StringBuilder = New StringBuilder()
str_js.Append("$(document).ready(function () {")
str_js.Append("var HF_val=$('#" & HF_DDL1.ClientID & "').val();")
str_js.Append("if (HF_val!=''){")
str_js.Append("$.each(HF_val.split(','),function (index,value) {")
str_js.Append("$('#" & DropDownList1.ClientID & " option[value=" & Chr(34) & "' + value + '" & Chr(34) & "]').prop('selected', true);")
str_js.Append("});")
str_js.Append("$('#" & DropDownList1.ClientID & "[class=" & Chr(34) & "chosen-select" & Chr(34) & "]').trigger('" & "chosen:updated" & "');")
str_js.Append("};")
str_js.Append("});")
WJS2(str_js.ToString, Page, "js1")
End Sub
Public Sub WJS2(ByVal str_js As String, ByVal Pa As System.Web.UI.Page, ByVal str_js_name As String)
If ScriptManager.GetCurrent(Pa) Is Nothing Then
'未啟用asp.net ajax功能
'有些情況下會需要以動態的方式加入用戶端指令碼。 若要動態加入指令碼，請使用 RegisterClientScriptBlock 方法、RegisterClientScriptInclude 方法、RegisterStartupScript 方法或 RegisterOnSubmitStatement 方法，視您要加入指令碼的時間和方式而定。
'最後面插入JS程式碼
Pa.ClientScript.RegisterStartupScript(Me.GetType(), str_js_name, str_js.ToString, True)
Else
'啟用asp.net ajax功能
ScriptManager.RegisterStartupScript(Pa, Me.GetType(), str_js_name, str_js.ToString, True)
End If
End Sub
沒有留言:
張貼留言