jQuery實現兩個DropDownList聯動(MVC)

近段時間原本是學習MVC的，誰知道把jQuery也學上了。而且覺得對jQuery更感興趣，比如今早上有寫了一個練習《jQuery實現DropDownList(MVC)》http://www.cnblogs.com/insus/p/3413749.html，是jQuery實現DropDownList的。就在此基礎上，也使用jQuery實現兩個DropDownList之間的聯動。

兩個DropDownList聯動，第一個DropDownList實現並沒有過多技術上的考慮，而第二個DropDownList實現起來，有幾點需要想到的。
一數據源是要傳遞參數；二在初始化時，要顯示一個選項，如"選擇..."，而不是一個空的DropDownList；三當第一個DropDownList選擇回"選擇..."時，第二個DropDownList也要顯示回初始狀態。

好的，開始了。
先檢查數據庫(以前有提供下載)，是否有此存儲過程，如果不存在，可以在SQL數據庫查詢分析器中，執行下面的存儲過程：

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author:        Insus.NET
-- Create date:  2013-06-07
-- Description:    get all kind of fruit by fruit category.
-- =============================================
IF OBJECT_ID('[dbo].[usp_FruitKind_GetByFruitCategory]') IS NOT NULL
    DROP PROCEDURE [dbo].[usp_FruitKind_GetByFruitCategory]
GO

CREATE PROCEDURE [dbo].[usp_FruitKind_GetByFruitCategory]
(
    @FruitCategory_nbr TINYINT
)
AS
SELECT [FruitKind_nbr],[FruitCategory_nbr],[CategoryName],[KindName] FROM [dbo].[udf_FruitKind]()
WHERE [FruitCategory_nbr] = @FruitCategory_nbr
GO

 

 去MVC應用程序的目錄Entities下，打開FruitKindEntity.cs，並添加一個返回List<SelectListItem>函數SelectLists(byte? fruitCategory_nbr)：

去相應的控制器KindController.cs寫一個JsonResult的Action，並給其添加一個屬性[HttpPost],目的是為了稍后在視圖的jQuery使用$.post()方法。
 

 
接下來，修改視圖Views/Fruit/Create.cshtml，添加一句html:

 開始寫jQuery:

 

上圖中，第一步，是獲取第一個DropDownList。
第二步，是獲取第二個DropDownList。
第三步指示，是第一個DropDownList的選擇值。

看看實時操作演示：



嗯，不錯喔，不過成功了90%。看到第二個DropDownList，在視圖最初顯示與第一個DropDownList選擇了"選擇..."選項時，它都顯示為一個空的DropDownList。有點不好。
在這些情況之下，是否讓其顯示為"選擇..."呢？答案是肯定的。可以看看Insus.NET修改jQuery的代碼。



基本上添加三部分地方，第一部分是在視圖加載時，為第二個DropDownList顯示"選擇..."，第二部分是判斷第一個DropDownList的選擇值，如果選擇的是0，那第二個DropDownList就顯示為"選擇..."

現在我們再看看修改后的實時操作：



結束了，也許算不上100%完美，Insus.NET的功力暫時只能達到這樣子了。