Implement no refresh DROPDOWNLIST linkage effect

xiaoxiao2021-03-06  64

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 UpClassIDint (4) Super Class Class ClassLevelint (4) Class level, 1 is big, 2 is small class

Second, the design steps:

1. First, we create a new page Droptest.aspx in which 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 = "</p> <p>http://schemas.microsoft.com/intellisense/ie5</p> <p>"Name =" vs_targetSchema "> <script> function load (ClassID) {// ClassID categories to receive a number of transmitted var drp2 = document.getElementById (" DropDownList2 "); all function (oElem) {// clear the DropDownList2 RemoveAll I = 0; for (i = Olem.length; I> = 0; i -) {Olem.Options.Remove (i);}} Removeall (DRP2) VAR OHTTPREQ = New ActiveXObject ("msxml2.xmlhttp" VAR ODOC = New ActiveXObject ("msxml2.domdocument"); ohttpreq.open ("post", "DROPCHILD.ASPX? ClassID =" classid, false); // call to read the page of small class data, will be large The class // number value passes the past OHTTPREQ.send (""); result = OHTTPREQ.RESPONSETEXT ;ODOC.LoadXML (Result); items1 = odoc.selectnodes ("// classname / table / classname); // Read all Request Big Class Class Class name items2 = odoc.selectnodes ("// ClassName / Table / ClassID"); // Read all the number of columns belonging to the columns of the columns of the small class VAR item ItemsLENGTH = items1.length; for (i = 0; i <itemslength; i ) // gives DropDownList2 {var newiption = document.createElement ("option"); newOption.Text = items1 [i]. TEXT; newOption.Value = items2 [i] .text; drp2.Options.add (newoption);}} </ script> </ head> <body ms_positioning = "flowLayout> <form id =" Form1 "Method =" POST "Runat =" Server "> <asp: DropdownList ID =" DropDownList1 "Runat ="</p> <p>Server> <asp: DropdownList> <askNLIST2 RUNAT = "server"> </ ask: DropDownloadList> <ask: textbox id = "th" runat = "server" BorderStyle = "None" Forecolor = "White" BorderColor = "White"> </ asp: textbox> <ask: label id = "label1" runat = "server"> </ asp: label> <ask: button id = "Button1" runat = "server "Text =" Button "> </ asp: button> </ form> </ body> </ html> The code within the DROPDOWNLIST1.ASPX.cs is as follows:</p> <p>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); this.DropDownList1.DataSource = ds.Tables [0] .DefaultView; this.DropDownList1.DataTextField =" ClassName "; this.DropDownList1.DataValueField = "Classid"; this.dropdownList1.database.dropdownlist1.attributes.add ("onchange", ",", "); // Picking ClassID as a parameter Script Function LOAD (ClassID), if you want to pass the classname, you should change the value to InnerText, but if you are bigger as Chinese, you call the small class when you call the problem // this.dropdownlist2.attributes.add ("onchange "," JavaScript: Document.form1.th.Value = this.Options [this.selectedIndIndex] .value; "); // read the value of DROPDOWNLIST2, assigns it to a TEXTBOX control TH to get the value of DROPDOWNLIST2, To get the value of DropDownList2, someone says it online can be obtained by using hidden TextBox controls, I have not been implemented, because the TEXTBOX control hidden in the client is also accessible to the script, can't assign it, I can only pass Setting the style, font color in the same way to achieve hidden effect, 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 DROPDOWNLIST2 value, adds the TextBox control TH. When you click Button, the process code is processed as follows: private void button1_click (Object sender, system.eventargs e) {label1.text = thxt;}</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-82206.html</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="82206" 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.063</b>, SQL: <b>12</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 = '2_2FZMHOzBWBBq0qmwzOGLygGXeQJL0j7c5_2BYTkK1nwUZWQB0VoBRGW9eNaisZ11KuYCx_2Fq4UUFtRJaziamwnNwQ_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>