The second-level linkage effect of drop-down box implemented by js

This article describes the secondary linkage effect of drop-down boxes implemented by js. Share it for your reference, as follows:

 <script language="JavaScript" type="text/javascript"><!--/* * Description: Clear the option value of the specified drop-down list* Reprinted from: Gdong Elvis ( http://www.gdcool.net ) * * @param {String || Object]} selectObj The name or object of the target drop-down box must be */ function removeOptions(selectObj) { if (typeof selectObj != 'object') { selectObj = document.getElementById(selectObj); } // The original option count var len = selectObj.options.length; for (var i=0; i < len; i++) { // Remove the current option selectObj.options[0] = null; } } /* * @param {String || Object]} selectObj The name or object of the target drop-down selection box must be * @param {Array} optionList The format of the option value: [{txt:'Beijing', val:'010'}, {txt:'Shanghai', val:'020'}] , must * @param {String} firstOption The first option value, such as: "Please select", optional, the value is empty * @param {String} selected default selected value, optional */ function setSelectOption(selectObj, optionList, firstOption, selected) { if (typeof selectObj != 'object') { selectObj = document.getElementById(selectObj); } // Clear the option removeOptions(selectObj); // Option count var start = 0; // If you need to add the first option if (firstOption) { selectObj.options[0] = new Option(firstOption, ''); // Option count start ++; } var len = optionList.length; for (var i=0; i < len; i++) { // Set option selectObj.options[start] = new Option(optionList[i].txt, optionList[i].val); // Select item if(selected == optionList[i].val) { selectObj.options[start].selected = true; } // Add 1 to count start ++; } } //--></script><script language="JavaScript" type="text/javascript">var cityArr = [];cityArr['Jiangsu Province'] =[ {txt:'Nanjing', val:'Nanjing'}, {txt:'Wuxi', val:'Wuxi'}, {txt:'Xuzhou', val:'Xuzhou'}, {txt:'Suzhou', val:'Suzhou'}, {txt:'Nantong', val:'Nantong'}, {txt:'Huaiyin', val:'Huaiyin'}, {txt:'Yangzhou', val:'Yangzhou'}, {txt:'Zhenjiang', val:'Zhenjiang'}, {txt:'Changzhou', val:'Changzhou'} ];cityArr['Zhejiang'] =[ {txt:'Hangzhou', val:'Hangzhou'}, {txt:'Ningbo', val:'Ningbo'}, {txt:'Wenzhou', val:'Wenzhou'}, {txt:'Huzhou', val:'Huzhou'} ];function setCity(province){ setSelectOption('city', cityArr[province], '-Please select-');}</script> <select name="province" id="province" onchange="if(this.value != '') setCity(this.options[this.selectedIndex].value);"> <option value="">-Please select-</option> <option value="Jiangsu Province">Jiangsu Province</option> <option value="Zhejiang Province">Zhejiang Province</option> </select> <select name="city" id="city"> <option value="">-Please select-</option> </select> City

PS: Here I recommend a very useful JavaScript compression, formatting and encryption tool for you, which has very powerful functions:

JavaScript compression/formatting/encryption tools: http://tools.VeVB.COM/code/jscompress

The encryption function in the above js tool can realize the encryption form of eval function of js code. This site also provides the following decryption tool for eval function encryption, which is very powerful and practical!

JS's eval method online encryption and decryption tool : http://tools.VeVB.COM/password/evalencode

For more information about JavaScript, please check the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript traversal algorithms and techniques", and "Summary of JavaScript mathematical operations usage"

I hope this article will be helpful to everyone's JavaScript programming.