When the Database Query page is designed, the drop-down menu is an element that is often used. Many times you would like to choose one of the drop-down menu, the content of the other drop-down menu will change. This feature can be implemented by refreshing the page, but the interface is not so friendly. In this paper, you can achieve the purpose of refreshing the page. When a province is selected in the drop-down menu, another drop-down menu will appear some cities for the province. My basic idea is: In the client script, all the contents of the drop-down menu may appear firstly store in an array, and then extract data from the array as needed to write the drop-down menu. The following is a complete code:
Dynamic change drop-down menu content example </ title></p>
<p></ HEAD></p>
<p><Script language = javaScript></p>
<p><! -</p>
<p>// Define a two-dimensional array AARRAY to store the city name.</p>
<p>VAR ACITY = New Array ();</p>
<p>ACITY [0] = new array ();</p>
<p>ACITY [1] = New Array ();</p>
<p>ACITY [2] = New Array ();</p>
<p>ACITY [3] = New Array ();</p>
<p>// Assignment, the city in each province stores a line of array.</p>
<p>ACITY [0] [0] = "- Please select -"</p>
<p>ACITY [1] [0] = "- Please select -"</p>
<p>ACITY [1] [1] = "Guangzhou";</p>
<p>ACITY [1] [2] = "Shenzhen";</p>
<p>ACITY [1] [3] = "Zhuhai City";</p>
<p>ACITY [1] [4] = "Shantou";</p>
<p>ACITY [1] [5] = "Foshan";</p>
<p>ACITY [2] [0] = "- Please select -"</p>
<p>ACITY [2] [1] = "Changsha";</p>
<p>ACITY [2] [2] = "Zhuzhou";</p>
<p>ACITY [2] [3] = "Xiangtan City";</p>
<p>ACITY [3] [0] = "- Please select -"</p>
<p>ACITY [3] [1] = "Hangzhou";</p>
<p>ACITY [3] [2] = "Suzhou";</p>
<p>ACITY [3] [3] = "Wenzhou";</p>
<p>Function changecity ()</p>
<p>{VAR I, iProvinceIndex;</p>
<p>iProvinceIndex = document.frm.optprovince.selectedIndIndex</p>
<p>ICITYCOUNT = 0;</p>
<p>While (Acity "! = null) iCityCount ; // Calculate the number of urban numbers selected</p>
<p>Document.frm.optcity.Length = iCityCount; // change the number of options for the drop-down menu</p>
<p>For (i = 0; i <= iciTyCount-1; i ) // change the content of the drop-down menu</p>
<p>Document.frm.optcity [i] = new option (ACITY [iProvinceIndex] [i]);</p>
<p>Document.frm.optcity.focus ()</p>
<p>}</p>
<p>-></p>
<p></ Script></p>
<p><Body onfocus = changecity ()></p>
<p><H3> Choose your province and city </ h3></p>
<p><Form name = "frM"></p>
<p><P> province:</p>
<p><Select name = "optprovince" size = "1" onchange = changecity ()> <option> - Please select - </ option></p>
<p><Option> Guangdong Province </ option></p>
<p><Option> Hunan Province </ option></p>
<p><Option> Zhejiang </ option></p>
<p></ Select></p>
<p></ P></p>
<p><P> City:</p>
<p><Select name = "optCity" size = "1"></p>
<p><Option> - Please select - </ Option></p>
<p></ Select></p>
<p></ P></p>
<p></ Form></p>
<p></ Body></p>
<p></ Html></p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-92503.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="92503" 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.049</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 = 'b8i9iLa70g48H1d8vl5ppmhRQVqE6PQv9yFJkDf3ZQbosCrkmLpBInqXklx0uOLMq_2FadlBjFJa78wIduZMokKA_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>
