Implement no refresh DROPDOWNLIST linkage effect

xiaoxiao2021-04-11  538

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> <div class="container"><script async src=""></script><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4353904188500336" data-ad-slot="2690212427" data-ad-format="auto" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2010-至今 All Rights Reserved 支持: <a href="" target="_blank" title="盘搜搜">盘搜搜</a> / <a href="" target="_blank" title="盘多多">盘多多</a> / <a href="" target="_blank" title="系统">系统</a> / <a href="" target="_blank" title="软件">软件</a> / <a href="" target="_blank" title="技术">技术</a> / <a href="" target="_blank" title="IT">IT</a> / <a href="" target="_blank" title="招标网">招标网</a> / <a href="" target="_blank" title="笔趣阁">笔趣阁</a> / <a href="" target="_blank" title="铅笔小说">铅笔小说</a> / <a href="" target="_blank" title="专利网">专利网</a> / <a href="" target="_blank" title="答案网">答案网</a> / <a href="" target="_blank" title="问医生">问医生</a> / <a href="" target="_blank" title="文库">文库</a> / <a href="" target="_blank" title="Kongfu">Kongfu</a> / <a href="" target="_blank" title="聚合搜索">聚合搜索</a> / <a href="" target="_blank" title="蓝奏云">蓝奏云</a> / <a href="" target="_blank" title="软件定制">软件定制</a> / <a href="" target="_blank" title="软件开发">软件开发</a> / <a href="" target="_blank" title="金蝶">金蝶</a> / <a href="" target="_blank" title="APP开发">APP开发</a> / <a href="" target="_blank" title="教务系统">教务系统</a> / <a href="" target="_blank" title="ERP系统">ERP系统</a> / <a href="" target="_blank" title="SAP">SAP</a> / <a href="" target="_blank" title="分销系统">分销系统</a> / <a href="" target="_blank" title="成都软件开发">成都软件开发</a> / <a href="" target="_blank" title="小程序开发">小程序开发</a> / <a href="" target="_blank" title="ERP">ERP</a> / <a href="" target="_blank" title="WMS">WMS</a> / <a href="" target="_blank" title="MES">MES</a> / <a href="" target="_blank" title="PLM">PLM</a> / <a href="" target="_blank" title="希沃">希沃</a> / <a href="" target="_blank" title="O2O">O2O</a> / <a href="" target="_blank" title="培训系统">培训系统</a> / <a href="" target="_blank" title="在线问诊系统">在线问诊系统</a> / <a href="" target="_blank" title="医疗咨询系统">医疗咨询系统</a> / <a href="" target="_blank" title="网店代运营">网店代运营</a> / <a href="" target="_blank" title="返利网">返利网</a> / <a href="" target="_blank" title="京东代运营">京东代运营</a> / <a href="" target="_blank" title="斯特封">斯特封</a> / <a href="" target="_blank" title="NOK">NOK</a> / <a href="" target="_blank" title="斯凯孚">斯凯孚</a> / <a href="" target="_blank" title="圣戈班">圣戈班</a> / <a href="" target="_blank" title="派克汉尼汾">派克汉尼汾</a> / <a href="" target="_blank" title="洪格尔">洪格尔</a> / <a href="" target="_blank" title="密封圈">密封圈</a> / </div><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src =""; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script><div class="col text-right">Processed: <b>0.023</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.1.0"></script><script src="view/js/jquery.min.js?2.1.0"></script><script src="view/js/popper.min.js?2.1.0"></script><script src="view/js/bootstrap.min.js?2.1.0"></script><script src="view/js/xiuno.js?2.1.0"></script><script src="view/js/bootstrap-plugin.js?2.1.0"></script><script src="view/js/async.min.js?2.1.0"></script><script src="view/js/form.js?2.1.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.1.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 = 'yIbp_2BxqfKmH00aHtkFhhTtArltWehSHKRQBzm0wLFWgVbkUmZqaPd_2BazyvsKHH_2FBv7B9AytYVaFm0P1KPhz2IQ_3D_3D'; var body = $('body'); body.on('submit', '#quick_reply_form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); postdata.safe_token = safe_token; $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { var s = '<ul>'+message+'</ul>'; var jli = $(s).find('li'); jli.insertBefore($('.postlist > .post').last()); $('.post-subject').remove(); jsubmit.button('reset'); $('#message').val(''); var jfloor = $('#newfloor'); jfloor.html(xn.intval(jfloor.html()) + 1); var jposts = $('.posts'); jposts.html(xn.intval(jposts.html()) + 1); var quotepid = jthis.find('input[name="quotepid"]'); $('[data-pid="'+quotepid.val()+'"]').removeClass('quote'); quotepid.val(0); } 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>