功能敘述：當我選取DDL1下拉式選單時，就會啟用另外一個DDL2下拉式選單，當我又選取DDL2的學生姓名選項時，又會去將隱藏起來的TextBox顯示出來，讓使用者進去條件的查詢。
前置作業：
1.先新增一個網頁名為：Default2.aspx
HTML：
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-2.0.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DDL1" runat="server">
<asp:ListItem Value="-1">請選擇查詢方式</asp:ListItem>
<asp:ListItem Value="0">未測驗</asp:ListItem>
<asp:ListItem Value="1">不合格者</asp:ListItem>
<asp:ListItem Value="2">合格者</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DDL2" runat="server" Enabled="false">
<asp:ListItem Value="-1">全部</asp:ListItem>
<asp:ListItem Value="0">學生姓名</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="查詢" Enabled="false"/>
</div>
</form>
</body>
</html>
後置程式碼：
Imports System.Text
Partial Class Default2
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim str_js As New StringBuilder
str_js.Append("$(document).ready(function(){")
str_js.Append("$('#" & TextBox1.ClientID & "').hide();")
str_js.Append("$('#" & DDL1.ClientID & "').change(")
str_js.Append("function(){")
str_js.Append("var str_text=$('#" & DDL1.ClientID & "').find(':selected').text();") '取得被選擇項目的文字
str_js.Append("var str_value=$('#" & DDL1.ClientID & "').find(':selected').val();") '取得被選擇項目的值
'true停用，啟用它就設成false;再asp.net控制項則是相反enabled=true為啟用,enabled=false則不啟用
str_js.Append("if(parseInt(str_value)==-1){$('#" & DDL2.ClientID & "').attr('disabled',true);" & _
"$('#" & DDL2.ClientID & "').find('option:eq(0)').attr('selected', true);" & _
"$('#" & Button1.ClientID & "').attr('disabled',true);" & _
"$('#" & TextBox1.ClientID & "').hide();" & _
"}else{$('#" & DDL2.ClientID & "').attr('disabled',false);" & _
"$('#" & Button1.ClientID & "').attr('disabled',false);}")
str_js.Append("});")
str_js.Append("$('#" & DDL2.ClientID & "').change(")
str_js.Append("function(){")
str_js.Append("var str_value2=$('#" & DDL2.ClientID & "').find(':selected').val();")
str_js.Append("if(parseInt(str_value2)==-1){$('#" & TextBox1.ClientID & "').hide();" & _
"}else{$('#" & TextBox1.ClientID & "').show();}")
str_js.Append("});")
str_js.Append("});")
If ScriptManager.GetCurrent(Page) Is Nothing Then
'未啟用asp.net ajax功能
'有些情況下會需要以動態的方式加入用戶端指令碼。 若要動態加入指令碼，請使用 RegisterClientScriptBlock 方法、RegisterClientScriptInclude 方法、RegisterStartupScript 方法或 RegisterOnSubmitStatement 方法，視您要加入指令碼的時間和方式而定。
Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "Default2", str_js.ToString, True)
Else
'啟用asp.net ajax功能
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "Default2", str_js.ToString, True)
End If
End Sub
End Class
說明：
1. <script src="jquery-2.0.1.min.js"></script> 引用JQuery檔案，要引用才能撰寫JQuery
2.有人會發現，我將JQuery寫在後置程式碼裡，透過RegisterClientScriptBlock方法將撰寫好的JQuery直接插入到html裡(你可以按滑鼠右鍵→檢視原始檔，就會發現JQuery程式碼已經插入到html當中)，就可以執行JQuery程式碼
其餘改日再補充...
沒有留言:
張貼留言