jquery implements two DropDownList linkage (MVC)

The last time was to learn about MVC, who knows how to learn jquery. And feel more interested in jquery, such as having written this morning about the practice of jquery implementing DropDownList (MVC) http://www.cnblogs.com/insus/p/3413749.html, Is the jquery implementation of DropDownList. On this basis, we also use jquery to achieve the linkage between the two DropDownList.

Two DropDownList linkage, the first DropDownList implementation and not too much technical considerations, and the second DropDownList realized, there are a few things to think of.
A data source is a parameter to be passed; When initializing, you display an option, such as "SELECT ..." instead of an empty DropDownList; When the first DropDownList is selected back to "Select ...", the second DropDownList is also shown back to the original state.

OK, here we go.
Check the database first (previously available for download), have this stored procedure, and if it does not exist, you can execute the following stored procedure in SQL database Query Analyzer:

SET ansi_nulls ongoset quoted_identifier ongo--=============================================--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]gocreate PROCEDURE [dbo]. [Usp_fruitkind_getbyfruitcategory] (    @FruitCategory_nbr TINYINT) asselect [fruitkind_nbr],[fruitcategory_nbr],[categoryname],[kindname] from [dbo] . [Udf_fruitkind] () WHERE [FRUITCATEGORY_NBR] = @FruitCategory_nbrGO

Go to the MVC application directory entities, open FruitKindEntity.cs, and add a return list<selectlistitem> function selectlists (byte? fruitcategory_ NBR):

Go to the corresponding controller KindController.cs write a jsonresult action and add a property [HttpPost] to it, in order to later use the $.post () method in the view of jquery.

Next, modify the view views/fruit/create.cshtml, adding a sentence of HTML:

Start writing jquery:

, the first step is to get the first DropDownList.
The second step is to get a second DropDownList.
The third step indicates that the selection value of the first DropDownList.

Take a look at the live operation Demo:



Well, yes, but it was 90%. When you see the second DropDownList, it appears as an empty DropDownList when the view is initially displayed with the "Select ..." option selected in the first DropDownList. It's a little bad.
In these cases, do you want to show it as "Select ..."? The answer is yes. You can look at the code for Insus.net to modify jquery.



Basically add three parts of the place, the first part is when the view load, for the second DropDownList display "Select ...", the second part is to determine the first DropDownList selection value, if the selection is 0, then the second DropDownList is displayed as "SELECT ... "

Now let's look at the modified real-time operation:



The end, perhaps not 100% perfect, Insus.net's skill temporarily can only achieve this appearance.