JavaScript call XML production link pull box
Author: He Yao
Thursday, June 5 2003 2:44 PM
Two methods are used in the traditional HTML page:
1) Directly use the contents of the drop-down box in the HTML's JavaScript to call the JavaScript function loop write to the drop-down box. This method is not suitable for the case where the pull-down box content is often changed. Because the data source and the JavaScript program are written on the same page.
list </ title></p>
<p><meta http-equiv = "Content-type" content = "text / html; c</p>
<p>Harset = GB2312 "></p>
<p><script language = "javascript"></p>
<p><! -</p>
<p>VAR OneCount;</p>
<p>OneCount = 0;</p>
<p>Subcat = new array ();</p>
<p>Subcat [0] = New Array ("Xuhui District", "01", "001");</p>
<p>Subcat [1] = New Array ("Jiading District", "01", "002");</p>
<p>Subcat [2] = New Array ("Huangpu District", "01", "003");</p>
<p>Subcat [3] = New Array ("Nanchang", "02", "004");</p>
<p>Subcat [4] = New Array ("Jiujiang", "02", "005");</p>
<p>Subcat [5] = New Array ("Shangrao City", "02", "006");</p>
<p>OneCount = 6;</p>
<p>Function ChangeLocation (locationID)</p>
<p>{</p>
<p>Document.myform.smallLocation.Length = 0;</p>
<p>Var locationId = locationID;</p>
<p>Var i;</p>
<p>Document.myform.smallLocation.Options [0] = new option ('==== all regions ====', '');</p>
<p>For (i = 0; i <onecount; i )</p>
<p>{</p>
<p>IF (Subcat [I] [1] == locationID)</p>
<p>{</p>
<p>Document.myform.smallLocation.Options [Document.myform.smallLocation.Length]</p>
<p>= New option (SUBCAT [I] [0], SUBCAT [I] [2]);</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>// -></p>
<p></ script></p>
<p></ hEAD></p>
<p><body></p>
<p><form name = "myform" Method = "post"></p>
<p><select name = "biglocation"</p>
<p>Onchange = "ChangeLocation (Document.myform.BigLocation.Options [Document.Myform.BigLocation.Selected">></p>
<p><option value = "01" SELECTED> Shanghai </ option> <option value = "02"> Jiangxi </ option></p>
<p></ select></p>
<p><select name = "smallLocation"></p>
<p><option selected value = ""> == All regions == </ option></p>
<p></ select></p>
<p></ form></p>
<p><script language = "javascript"></p>
<p><! -</p>
<p>ChangeLocation (Document.Myform.BigLocation.Options [Document.MyForm.bigLocation.SelectedIndex] .value);</p>
<p>// -></p>
<p></ script></p>
<p></ body></p>
<p></ html></p>
<p>2) JavaScript directly read the database, use the record in the database to write JavaScript, and then call the JavaScript function loop writing in the next to the first method. This method separates the data source from JavaScript, but the publication of the database, from a security perspective, there is no utility value.</p>
<p>My method is to place the data in the drop-down box in the XML file, read the XML file with JavaScript, and get the content in the dropboard.</p>
<p>The HTML file is as follows:</p>
<p><! - myfile.html -></p>
<p><html></p>
<p><HEAD></p>
<p><script language = "javascript" for = "window" Event = "Online"></p>
<p>VAR XMLDoc = New ActiveXObject ("Microsoft.xmLDom");</p>
<p>VAR i = 0;</p>
<p>VAR J = 0;</p>
<p>Var subclass_name = ""</p>
<p>LOADXML ();</p>
<p>Function loadXML () {</p>
<p>Xmldoc.async = "false";</p>
<p>XMLDoc.Load ("Account.xml");</p>
<p>Xmlobj = xmldoc.documentelement;</p>
<p>Nodes = xmldoc.documentelement.childnodes;</p>
<p>Document.frm.mainclass.Options.Length = 0;</p>
<p>Document.frm.subclass.Options.Length = 0;</p>
<p>For (i = 0; i <xmlobj.childnodes.length; i ) {</p>
<p>Labels = Xmlobj.childNodes (i) .gettribute ("display_name");</p>
<p>VALUES = XMlobj.childNodes (i) .Text;</p>
<p>Document.frm.mainclass.add (Document.createElement ("Option"));</p>
<p>Document.frm.mainclass.Options [i] .text = labels;</p>
<p>Document.frm.mainclass.Options [i] .value = values;</p>
<p>}</p>
<p>}</p>
<p></ script></p>
<p><script language = "javascript"> var xmldoc = new activXObject ("Microsoft.xmLDom");</p>
<p>VAR i = 0;</p>
<p>VAR J = 0;</p>
<p>Function deleteOption () {</p>
<p>}</p>
<p>Function setsubclass (main) {</p>
<p>Var is_selected = "n";</p>
<p>IF (Document.Frm.Subclass.Options.Length! = 0) {</p>
<p>For (i = 0; i <= document.frm.subclass.Options.Length; i )</p>
<p>Document.frm.subclass.Options [i] = null;</p>
<p>}</p>
<p>// Repeat is effective</p>
<p>IF (Document.Frm.Subclass.Options.Length! = 0) {</p>
<p>For (i = 0; i <= document.frm.subclass.Options.Length; i ) {</p>
<p>Document.frm.subclass.Options [i] = null;</p>
<p>Document.frm.Subclass.Options.Remove (i);</p>
<p>}</p>
<p>}</p>
<p>For (i = 0; i <xmlobj.childnodes.length; i ) {</p>
<p>VAR values = ""</p>
<p>Var lables = "";</p>
<p>IF (is_selected == "y") Return;</p>
<p>Labels = Xmlobj.childNodes (i) .gettribute ("display_name");</p>
<p>VALUES = XMlobj.childNodes (i) .Text;</p>
<p>// Alert (labels "| main);</p>
<p>IF (labels == main) {</p>
<p>IS_SELECTED = "y";</p>
<p>For (j = 0; j <xmlobj.childnodes (i) .childnodes.length; j ) {</p>
<p>//subclass_name="document.frm.subclass ";</p>
<p>Labels = XMlobj.childNodes (i) .childNodes (j) .getttribute ("Display_name");</p>
<p>VALUES = XMlobj.childNodes (i) .childnodes (j) .text</p>
<p>// Alert (VALUES);</p>
<p>Document.frm.subclass.add (document.createElement ("option");</p>
<p>Document.frm.subclass.Options [j] .text = labels;</p>
<p>Document.frm.subclass.Options [j] .value = value;</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p></ script></p>
<p><title> Tune XML data </ title> in HTML</p>
<p></ hEAD></p>
<p><body bgcolor = "# ffffff"></p>
<p><Form name = "frM"></p>
<p>Type <select name = "mainclass" onchange = 'setsubclass (this [selectedindex] .text)'> </ select> <option selected value = "> </ option></p>
<p>Subclass <select name = "subclass"> </ select></p>
<p></ form></p>
<p></ body></p>
<p></ html></p>
<p>The account.xml is as follows:</p>
<p><? XML Version = "1.0" encoding = "GB2312"?></p>
<p><item></p>
<p><class display_name = "Unselected"></p>
<p><subclass display_name = ">"> NOT AVAILABLE </ SUBCLASS></p>
<p></ clas></p>
<p><class display_name = "95788 call card"></p>
<p><subclass display_name = "1152069589-1152069638> Dangdang1 </ subclass></p>
<p><subclass display_name = "1152081031-1152081080> Dangdang2 </ subclass></p>
<p><subclass display_name = "1152547201-1105254750> Dangdang3 </ subclass></p>
<p><subclass display_name = "1152548401-1152548700> Dangdang4 </ subclass></p>
<p><subclass display_name = "1152548701-1152549000> dangdang5 </ subclass></p>
<p><subclass display_name = "1156000001-1156010000> Dangdang6 </ subclass></p>
<p></ clas></p>
<p><class display_name = "Online Registration"></p>
<p><subclass display_name = "1152000001-1152001000> Zhuce_USER1 </ SUBCLASS></p>
<p><subclass display_name = "1151001000-1151005000> Zhuce_USER2 </ SUBCLASS></p>
<p></ clas></p>
<p><class display_name = "Communication"></p>
<p><subclass display_name = "1156030001-1156080000> tongxun </ subclass></p>
<p></ clas></p>
<p></ item></p>
<p>This method separates the data source to the JavaScript program, suitable for frequent changes. The URL parameters can be called directly in XMLDoc.Load to read remote XML and make loosely coupled. The above is used in IE6.0. The deficiencies are required when removing the drop-down box list</p>
<p>Repeat the delete operation, otherwise there will be obvious bug. I hope some readers can correct it.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-56196.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="56196" 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.043</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 = 'Kxu6x1SSUtmj9hjpaGczh75MczkGTTq8rwjWjrlECukbfxl41gLoV_2BVFfHZJtXmZaNpsedhXT9a334ld_2BJ8NXQ_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>
