(This post is posted on the old blog of the version engineer on)
When implementing the "linkage drop-down menu" (after selecting the first drop-down menu, the options of other drop-down menus will be dynamically taken out), if the menu content does not need to change frequently in the future, you can consider writing data directly to Javascript, instead of pulling data from the backend database and binding it to the drop-down list ). However, if Javascript has been written, you need to store the options selected by the user, and then use the same options as the linked drop-down menu on other pages, if the option selected by the user is automatically displayed, the onchange event of Javascript in the first drop-down menu has not been triggered when the page is started, so the options in other drop-down menus have not yet been generated, therefore, by default, the options saved on the previous page cannot be assigned to the drop-down menu that does not generate content on the next page.
(If you do not know what I want to express, we recommend that you directly execute the ASP. NET 2.0 download example for this post. Code )
The solution is to use HTML + C # + JavaScript code when loading the ASPX page to force the onchange event of Javascript in the first drop-down menu to bring out the options of other drop-down menus first. However, the onchange event in Javascript is different from the onblur or onfocus event, and can directly call the object. blur () and object. methods such as focus () have no so-called object. change () method; but we can use object instead. fireevent () triggers the onchange event as follows:
Document. All. dropdownlist1.fireevent ('onchange ');
If you have the above storage linkage drop-down menu options and want to display them on other pages, we can first store the value through "storage value" (including the value stored in a database, querystring, or session ), specify it to the first drop-down menu on the second page, specify its default options first, and then trigger the onchange event with the code in the method described above. Then, when loading the event on the second page, bring out all other content in the animation drop-down list once. Download example of this post. The execution screen is as follows:
Figure 1 Three dropdownlists are connected to each other. After the first menu is selected, the options of the second menu are displayed, and so on.
Figure 2 takes the three dropdownlist options to the second page through querystring, and triggers the fireddl1 function of JavaScript while loading the page
Download the following example:
Http://files.cnblogs.com/WizardWu/070629.zip
The database is not required during execution. This example also applies to various types of website development technologies.ProgramIs the createddlitems. js program located in the Javascript folder.
First vertex. aspx
<Body
Onload = "fireddl1 ()">
<FormID= "Form1"Runat= "Server">
<Div>
First Region <P> </P>
<ASP: hiddenfieldID= "Hiddenfield_step11"Runat= "Server" />
<ASP: hiddenfieldID= "Hiddenfield_step12"Runat= "Server" />
<ASP: hiddenfieldID= "Hiddenfield_step13"Runat= "Server" />
<BR/>
<ASP: dropdownlistID= "Dropdownlist_step11"Runat= "Server">
</ASP: dropdownlist>
<ASP: dropdownlistID= "Dropdownlist_step12"Runat= "Server">
</ASP: dropdownlist>
<ASP: dropdownlistID= "Dropdownlist_step13"Runat= "Server">
</ASP: dropdownlist>
<P> </P>
<ASP: buttonID= "Button1"Runat= "Server"Text= "Bringing values to the next region"Onclick= "Button#click" />
</Div>
</Form>
</Body>
</Html>
First example. aspx. CS
Public Partial Class _ Default: system. Web. UI. Page
{
Protected VoidPage_load (Object Sender, eventargs E)
{
If(! Ispostback)
{< br> dropdownlist_step11.attributes [ " onchange " ] = " build_fiveddlofstep11 (this. selectedindex); " ;
dropdownlist_step12.attributes [ " onchange " ] = " savevaluetohiddenfield12 (this. selectedindex); ";
Dropdownlist_step13.attributes ["Onchange"]= "Savevaluetohiddenfield13 (this. selectedindex );" ;
}
}
Protected VoidButton#click (Object Sender, eventargs E)
{
Response. Redirect ( " Default2.aspx? Ddl1 = " + Hiddenfield_step11.value + " & Ddl2 = " + Hiddenfield_step12.value + " & Ddl3 = " + Hiddenfield_step13.value );
}
}
