[Welfare] zosatapo
[Contact] dertyang@263.net
[Easy to explain] This article provides the dynamically generating SELECT options under the premise of not refreshing the page.
The current three programs are currently compared. And provide simple efficiency testing, web crew
According to yourself, you need to choose.
Due to time problems, I have not written articles, but I provide all the code I wrote.
I hope to have interested peers research.
The code should be written in detail.
new document </ title></p>
<p><Meta name = "generator" Content = "Editplus"></p>
<p><Meta name = "author" content = ">></p>
<p><Meta name = "keywords" content = ">></p>
<p><Meta name = "description" content = ">></p>
<p><style type = "text / css"></p>
<p>Body {Font-Family: Courier New, Courier}</p>
<p>SELECT {font-size: 8pt; font-family: Courier New, Courier}</p>
<p>Input {font-size: 8pt; font-family: Courier New, Courier}</p>
<p></ style></p>
<p><Script language = "javascript"></p>
<p><! -</p>
<p>VAR OPTTEXT = New Array (1000);</p>
<p>Var OptValue = New Array (1000);</p>
<p>Function Change (Object) {</p>
<p>OPT = Object.Options [object.selected ";</p>
<p>Alert (OPT.Value ":" OPT.Text);</p>
<p>}</p>
<p>For (i = 0; i <opttext.length; i )</p>
<p>{</p>
<p>Opttext [i] = "zostapo" i;</p>
<p>OptValue [i] = "name" i;</p>
<p>}</p>
<p>Function option () {</p>
<p>VAR OPT;</p>
<p>Var Start;</p>
<p>Var end;</p>
<p>Start = new date ();</p>
<p>SelContainer.innerhtml = "";</p>
<p>SelContainer.innerhtml = "<select id = 'selshow' οnchange = 'change (this);'> </ select></p>
<p>For (i = 0; i <opttext.length; i )</p>
<p>{OPT = New Option ();</p>
<p>// Or You May Code Like Below:</p>
<p>//opt=document.createElement ("Option ");</p>
<p>Opt.text = OPTTEXT [I];</p>
<p>Opt.Value = OptValue [i];</p>
<p>Selshiow.Options.Add (OPT);</p>
<p>}</p>
<p>End = new date ();</p>
<p>Optiontime.innertext = "The Operation TOOK TIME:" (end.gettime () - start.gettime ()) "MilliseConds";</p>
<p>Function Object ()</p>
<p>{</p>
<p>Var Start;</p>
<p>Var end;</p>
<p>Var str = "<select = 'selshow' οnchange = 'change (this);'>";</p>
<p>Start = new date ();</p>
<p>SelContainer.innerhtml = "";</p>
<p>For (i = 0; i <opttext.length; i )</p>
<p>{</p>
<p>Str = "<option value = '" OptValue [i] "" OPTTEXT [I] "</ option>";</p>
<p>}</p>
<p>Str = "</ select>";</p>
<p>Selcontainer.innerhtml = STR;</p>
<p>End = new date ();</p>
<p>ObjectTime.innertext = "The Operation TOOK TIME:" (end.gettime () - start.gettime ()) "MilliseConds";</p>
<p>}</p>
<p>Function Join ()</p>
<p>{</p>
<p>VAR LEN = OPTTEXT.LENGTH;</p>
<p>Var arr = new array (len);</p>
<p>Var Start;</p>
<p>Var end;</p>
<p>Start = new date ();</p>
<p>SelContainer.innerhtml = "";</p>
<p>Jointime.innertext = ""</p>
<p>For (i = 0; i <len; i )</p>
<p>{</p>
<p>Arr [i] = "<option value = '" OptValue [i] "" OPTTEXT [I] "</ option>";</p>
<p>}</p>
<p>SelContainer.innerhtml = "<select id = 'selshow' οnchange = 'change (this);'>" arr.join () "</ select>";</p>
<p>End = new date ();</p>
<p>Jointime.innertext = "The Operation TOOK TIME:" (end.gettime () - start.gettime ()) "MilliseConds";</p>
<p>}</p>
<p>// -></p>
<p></ Script></p>
<p></ HEAD></p>
<p><Body bgcolor = "# ffffff"></p>
<p><p align = center> <b> <font size = 4> Dynamic Generating SELECT Option Demo Daquan </ font> </ b> </ p></p>
<p>Method i: <font color = blue> Options.add () </ font> <br></p>
<p><Input type = "Button" value = "New Option" οnclick = "option ();"> <span id = "optionTime"> test </ span> <br> <BR></p>
<p>Method i: <font color = blue> Object.innerhtml </ font> <br></p>
<p><Input Type = "Button" Value = "Object Innerhtml" οnclick = "Object ();">>>>>>>>>>></p>
<p><Span id = "objectTime"> test </ span> <br> <BR></p>
<p>Method i: <font color = blue> Object.innerhtml & array.join () </ font> <br></p>
<p><Input Type = "Button" value = "array join" οnclick = "join ();"></p>
<p><Span id = "joinTime"> <a href=#> test </a> </ span> <br> <BR></p>
<p><Font color = blue> demonstrate the effect of the preview area: </ font> <br> <br></p>
<p><span id = "SelContainer"></p>
<p><select id = "selshow"> <option> EMPTY </ option> </ select></p>
<p></ span></p>
<p></ Body></p>
<p></ Html></p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-28021.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="28021" 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.066</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 = 'fLUFr91rgSZ_2F5PPDKk1knqSYVO838FxTbsTcOjiSosxMH7AuzlTr2wOBH9lPm6B9euA3_2F3OPWt_2FAqxoPCyNXQg_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>
