There may be a lot of criticism, but I think this is really good. I have read about 20 refresh dynamic drop-down lists, and they are a mess under Firefox. I have been doing this for almost two days, that is, how to keep the value of the second list box after submitting the form, because adding entries to the drop-down box through JS will not be saved, I don't know. Is this Ajax?
Test Platform: IE6 and Firefox
Function: second-level brushless New Linkage
Features: cross-browser; submit a form to get the value of the second drop-down box; data comes from the database; send requests with XMLHTTP to achieve no refreshing
Request: If you can find a better method, please let me know. Thank you very much. Your criticism and suggestions are a great encouragement to me.
Webform1.aspx:
<% @ Page Language = "C #" codebehind = "webform1.aspx. cs" autoeventwireup = "false" inherits = "drop. webform1" %>
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Title> webform1 </title>
<Meta name = "generator" content = "Microsoft Visual Studio. NET 7.1">
<Meta name = "code_language" content = "C #">
<Meta name = "vs_defaultclientscript" content = "JavaScript">
<Meta name = "vs_targetschema" content = "http://schemas.microsoft.com/intellisense/ie5">
<Script language = "JavaScript">
// The JB function initializes XMLHTTP Objects Based on Different browsers.
Function JB ()
{
VaR A = NULL;
Try
{
A = new activexobject ("msxml2.xmlhttp ");
}
Catch (E)
{
Try
{
A = new activexobject ("Microsoft. XMLHTTP ");
}
Catch (OC)
{
A = NULL
}
}
If (! A & typeof XMLHttpRequest! = "Undefined ")
{
A = new XMLHttpRequest ()
}
Return
}
// The following go function is called when the parent list box is changed. The parameter is the selected entry.
Function go (OBJ)
{
// Obtain the value of the drop-down list in the selection box.
VaR svalue = obj. value;
// Define the page for Data Processing
VaR weburl = "webform1.aspx? Parent_id = "+ svalue;
// Initialize XMLHTTP objects
VaR XMLHTTP = JB ();
// Submit data. The first parameter is preferably get, and the third parameter is preferably true.
XMLHTTP. Open ("get", weburl, true );
// Alert (XMLHTTP. responsetext );
// If data is successfully returned
XMLHTTP. onreadystatechange = function ()
{
If (XMLHTTP. readystate = 4) // 4 indicates that data is returned successfully.
{
VaR result = XMLHTTP. responsetext; // get the data returned by the server
// Clear all dlistchild drop-down items first
Document. getelementbyid ("dlistchild"). Length = 0;
// Add all models to dlistchild. Note that option is not option.
Document. getelementbyid ("dlistchild"). Options. Add (New Option ("all models", "0 "));
If (result! = "") // If the returned data is not empty
{
// Divide the received string into arrays according
VaR allarray = result. Split (",");
// Loop this array, note that it starts from 1, because the first character of the received string is, number, so the first array after segmentation is empty
For (VAR I = 1; I <allarray. length; I ++)
{
// Split the string into an array according to |
VaR thisarray = allarray [I]. Split ("| ");
// Add entries for dlistchild
Document. getelementbyid ("dlistchild"). Options. Add (New Option (thisarray [1]. tostring (), thisarray [0]. tostring ()));
}
}
}
}
// Send data. Pay attention to the sequence and parameters. The parameter must be null or ""
XMLHTTP. Send (null );
}
</SCRIPT>
</Head>
<Body ms_positioning = "gridlayout">
<Form ID = "form1" method = "Post" runat = "server">
<Asp: dropdownlist onchange = "Go (this)" id = "dlistparent" style = "Z-INDEX: 101; left: 248px; position: absolute; top: 40px"
Runat = "server">
<Asp: listitem value = "100"> Motorola </ASP: listitem>
<Asp: listitem value = "101"> Nokia </ASP: listitem>
</ASP: dropdownlist>
<Asp: dropdownlist id = "dlistchild" style = "Z-INDEX: 102; left: 248px; position: absolute; top: 104px"
Runat = "server"> </ASP: dropdownlist>
<Asp: button id = "button1" style = "Z-INDEX: 103; left: 256px; position: absolute; top: 176px" runat = "server"
TEXT = "button"> </ASP: button>
</Form>
</Body>
</Html>
backend webform1.aspx. CS:
using system;
using system. collections;
using system. componentmodel;
using system. data;
using system. drawing;
using system. web;
using system. web. sessionstate;
using system. web. ui;
using system. web. UI. webcontrols;
using system. web. UI. htmlcontrols;
using system. configuration;
using system. data. sqlclient;
namespace drop
{< br> ///
Protected void binddrop ()
{
// First, I want to bind the parent dropdownlist to the database, which is unnecessary.
// If (! Ispostback)
//{
// Bind the parent dlistparent
// Bindparent ();
//}
// Obtain the passed parent_id value. If it is the first request, it is null.
String STR = request. querystring ["parent_id"];
String str1 = dlistparent. selectedvalue ;;
// Response. Write (str1 );
// If STR is added with a string! = The original string indicates that the onchange event of dlistparent was triggered.
If (STR + "ABC ")! = "ABC ")
{
// Bind the dlistchild Control
Bindchild (STR); // use the value of the parent dropdownlist as the parameter.
}
Else
Bindparent (str1 );
}
Protected void bindparent (string Str)
{
// If this is the first request or the page is refreshed, select the value of dlistparent.
// Convert the parameter to int
Int I = convert. toint32 (STR );
Dlistchild. Items. Clear ();
Dlistchild. Items. Add (New listitem ("all models", "0 "));
// Obtain the database connection string
String connstr = configurationsettings. receivettings ["connstring"]. tostring ();
// Initialize conn objects
Sqlconnection conn = new sqlconnection (connstr );
// Database statement
String commstr = string. Format ("select type_value, type_text from phone_type where parent_id = {0}", I );
// Create a database command object
Sqlcommand comm = new sqlcommand (commstr, Conn );
// Open the database
Conn. open ();
// Execute the command
Sqldatareader DR = comm. executereader ();
// Cyclically add entries to the dlistparent
While (dr. Read ())
{
Dlistchild. Items. Add (New listitem (Dr [1]. tostring (), Dr [0]. tostring ()));
// You can also
// Dlistparent. Items. Add (New listitem (Dr ["phone_text"]. tostring (), Dr ["phone_value"]. tostring ()));
}
// Add the following statement to save the status of the second dlistchild when the click submit button submits the form.
Dlistchild. selectedvalue = request. Form ["dlistchild"];
Dr. Close ();
Conn. Close ();
}
Protected void bindchild (string Str)
{
// The content added to any controls including dropdownlist through JS will not be saved
// Convert the parameter to int
Int I = convert. toint32 (STR );
// Define strings to save the data returned from the database
String result = "";
// Clear the output first
Response. Clear ();
String connstr = configurationsettings. receivettings ["connstring"]. tostring ();
Sqlconnection conn = new sqlconnection (connstr );
Sqlcommand comm = conn. createcommand ();
String commstr = string. Format ("select type_value, type_text from phone_type where parent_id = {0}", I );
Comm. commandtext = commstr;
Conn. open ();
Sqldatareader DR = comm. executereader ();
While (dr. Read ())
{
Result + = "," + Dr [0]. tostring () + "|" + Dr [1]. tostring ();
// Dlistchild. Items. Add (New listitem (Dr [1]. tostring (), Dr [0]. tostring ()));
}
// Output the information obtained from the database to the client
Response. Write (result );
// Close response after the output is complete to avoid unnecessary output
Response. Flush ();
Response. Close ();
Dr. Close ();
Conn. Close ();
}
# Code generated by region web Form Designer
Override protected void oninit (eventargs E)
{
//
// Codegen: This call is required by the ASP. NET web form designer.
//
Initializecomponent ();
Base. oninit (E );
}
/// <Summary>
/// The designer supports the required methods-do not use the code editor to modify
/// Content of this method.
/// </Summary>
Private void initializecomponent ()
{
This. button1.click + = new system. eventhandler (this. button#click );
This. Load + = new system. eventhandler (this. page_load );
}
# Endregion
Private void button#click (Object sender, system. eventargs E)
{
Response. Write (request. Form ["dlistchild"]. tostring ());
}
}
}
Data Table:
Primary Key ID parent_id (INT) type_value (INT) type_text (varchar)
Int increments the value of the parent drop-down box. The text of the value drop-down box
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
