Implement no refresh DROPDOWNLIST linkage effect

xiaoxiao2021-04-11  1.0K+

When making an article to add a function, you want to display the secondary class in the selection, you can easily implement it using DropdownList's SelectedIndexchanged event, but each time you choose the page, you will always be refreshed once, people feel Very unhappy. In order to achieve DropDownList brush-free secondary linkage, I found some information online in the past few days, but I can't reach the effect I want. After repeated debugging, this function has now been basically realized, and the code is now attached. I. Database design:

Field Name Data Type Description ClassID Auto Number Class ClassName VARCHAR (8) Class name UpClassID INT (4) Super Class Class ClassLevel Int (4) Class level, 1 is big, 2 is small class

Second, design steps: 1. First, we create a new page Droptest.aspx, put it in two DROPDOWNLIST controls: DropDownList1 and DropdownList2, its full code is as follows: <% @ page language = "C #" codebehind = "Droptest.aspx .cs "autoeventwireup =" false "inherits =" studyweb.droptest "%> Webform2 </ title> <meta content = "Microsoft Visual Studio .NET 7.1" name = "GENERATOR"> <meta content = "C #" name = "CODE_LANGUAGE"> <meta content = "JavaScript" name = "vs_defaultClientScript"> <meta content = "" name = "vs_targetschema"> <script> function load (classid) {// classid is a large class number VAR DRP2 = Document.GetElementByid ("DropdownList2" ); Function Removeall (OleM) {// All items of DropDownList2; for (i = Olem.Length; I> = 0; i -) {Olem.Options.Remove (i);}} RemoveAll (DRP2) VAR OHTTPREQ = New ActiveXObject ("msxml2.xmlhttp"); var = new activiXObject ("msxml2.domdocument"); OHTTPREQ.OPEN ("Post", "DROPCHILD, FALSE); // Call the page to read the small class data, pass the large class // number value in the past OHTTPREQ.send ("); Result = OHTTPREQ.RESPONSETEXT; ODoc.LoadXML (Result); items1 = odoc.selectnodes ("// ClassName / Table / ClassName);</p> <p>/ / Read all the collars of the collar to be class Items2 = odoc.selectnodes ("// ClassName / Table / ClassID"); // Read all the number of columns belonging to the columns of the columns of the columns VAR item ItemsLength = items1.length For (i = 0; i <itemslength; i ) // gives DropDownList2 {var newoption = document.createElement ("option"); newOption.Text = items1 [i] .text; newoption. Value = items2 [i] .text; drp2.Options.add (newiption);}}}}}}} </ script> </ head> <body ms_positioning = "flowLayout> <form id =" form1 "method =" post "runat = "Server"> <ask = "DropdownList1" runat = "server"> </ ask: DropDownList> <ask: DropdownList ID = "DropDownList2" runat = "server"> </ asp: dropdownload> <ask: TextBox ID = "th" runat = "server" borderStyle = "none" forcolor = "white" bordercolor = "white"> </ asp: textbox> <ask: label id = "label1" runat = "server"> </ asp : Label> <ask = "button1" runat = "server" text = "button"> </ asp: button> </ form> </ body> </ html> Background file (DropDownList1.aspx) .CS) Page_LOA D in the code as follows: if (this.IsPostBack!) {SqlConnection con = new SqlConnection ( "server = localhost; database = gswebDB; uid = sa; pwd =;"); SqlDataAdapter da = new SqlDataAdapter ( "select ClassName, ClassID From classname where classlevel = 1 ", con); DataSet DS = New DataSet (); DA.FILL (DS);</p> <p>this.DropDownList1.DataSource = ds.Tables [0] .DefaultView; this.DropDownList1.DataTextField = "ClassName"; this.DropDownList1.DataValueField = "ClassID"; this.DropDownList1.DataBind (); this.DropDownList1.Attributes.Add ("OnChange", "" "" "" "); // Pass the classID to the script function load (classID), if you want to pass the classname, change the value to Innertext However, if the big class is Chinese, the problem that cannot be displayed when calling the small class // this.dropdownList2.attributes.dd ("onchange", "javascript: = this.Options [this.selectedIndex ] .Value; "); // read the value of DROPDOWNLIST2, assigns a TEXTBOX control th to get the value of DROPDOWNLIST2, to get the value of DropdownList2, someone on the Internet can get it by using hidden TextBox controls, I Failed, because the TEXTBOX control hidden in the client is also accessible, can't assign it, I can only achieve hidden effects by setting the style, font color in the background, this is a very stupid Method, who has a good method, please help me. } This page implements the following features: First read all class numbers and class names and class numbers from the database, bind to the DropDownList1 control; then call the JavaScript function load (ClassID) by DropDownList1 attributes attribute; The LOAD () function reads the XML stream by calling the Dropchild.aspx page, gets the classname and classid of the small class belonging to the Big Class.</p> <p>2, create a new DROPCHILD.ASPX page file, which is not inserted into any controls and text, add the following code only in its inaudild.aspx.cs: if (this.Request ["classid"]! = Null ) {int state = Convert.ToInt32 (this.Request [ "ClassID"]); SqlConnection con = new SqlConnection ( "server = localhost; database = gswebDB; uid = sa; pwd =;"); SqlDataAdapter da = new SqlDataAdapter ( "select className, ClassID from classname where UpClassID = '" state "'", con); DataSet ds = new DataSet ( "cLASSNAME"); da.Fill (ds); XmlTextWriter writer = new XmlTextWriter (Response.OutputStream, Response .Contentencoding; writer.formatting = formatting.indented; Writer.indentation = 4; Writer.indentChar = '; ds.writexml; Writer.Flush (); response.end (); Writer.Close (); This method gets the large class number selected by the user. After getting a DataSet object after query, write the content directly to the loonse.outputstream and passed to the client, the client's Load method passes Result = OHTTPREQ.RESPONSETEXT ; A sentence get an XML string, and finally parsing this string. In addition, the test acquires the DROPDONLIST2 value, adds the TextBox control TH. When you click Button, the process code is processed as follows: private void button1_click (Object sender, system.ext = thxt;} Using VB implementation:</p> <p>Public class Webform2 inherits</p> <p>#Region "The code" of the web form designer "</p> <p>'This call is required for the web form designer. <System.diagnostics.debuggerstepthrough ()> private subinitializecomponent ()</p> <p>End Sub Protected WithEvents Button1 As System.Web.UI.WebControls.Button Protected WithEvents listType1 As System.Web.UI.WebControls.DropDownList Protected WithEvents listType2 As System.Web.UI.WebControls.DropDownList 'Note: The following statement is a placeholder Web Form Designer is required. 'Don't delete or move it. Private designerPlaceholderDeclaration As System.ObjectPrivate Sub Page_Init (ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init 'CODEGEN: This method is called the Web Form Designer required' Do not modify it using the code editor . InitializationComponent () End Sub</p> <p>#End region</p> <p>Private Sub Page_Load (ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 'initialization page is placed here user code If Not Page.IsPostBack Then listType1.AutoPostBack = True Dim con As OleDb.OleDbConnection = new OleDb.OleDbConnection (ConfigurationSettings.AppSettings ( "ConnectionString")) Dim lstr As String = "select className, ClassID from classname where ClassLevel = 1" Dim ds As DataSet = new DataSet con.Open () Dim comm As OleDb.OleDbDataAdapter = new OleDb.OleDbDataAdapter (lstr, con) comm.Fill (ds, "fulei") listType1.DataSource = ds.Tables ( "fulei"). DefaultView listType1.DataTextField = "ClassName" listType1.DataValueField = "ClassID" listType1.DataBind () Con.close () end if End Sub</p> <p>Private sub button1_click (byval e AS System.Object, byval e as system.eventargs) handles response.write (Listtype2.SelectedValue) End Sub</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="133556" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.044</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'cJIyObIb53_2FqsJZu_2Fv3KyPmKz0i9EO8MJ5mNq_2B3hKsSwO0EGxtLl_2BwuPAq8ZOItnFR1eP5sISS64n82fTT9YCA_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>