Full version: jsB@nk » Form » Dropdown » Change the size property in execution time
URL: https://www.javascriptbank.com/change-the-size-property-in-execution-time.html
The idea of this JavaScript is very simple. Just define one layer for every size you need. In academical therms it is not correct; but in the reality, we can supose that the maximum size that a list will have could be about 10 (and <50 physically).
Full version: jsB@nk » Form » Dropdown » Change the size property in execution time
URL: https://www.javascriptbank.com/change-the-size-property-in-execution-time.html
<SCRIPT language=javascript> <!-- // Set the number of positions for the arrays. var MaxNumArray = 6 // Defining the arrays. var MainList=new Array(MaxNumArray) var SubList=new Array(MaxNumArray) // The last view used. var lastLayerVis = 1 // Create the data // If wants to personalize, just put the data in the next function. function PrepareData() { for (i = 0; i < MaxNumArray; i++) { MainList[i]="Show " + (i+1) + " item(s) in the sublist." SubList[i] ="Item" + (i+1) + "." } } // This will show the main list. The list will let us to change the size of the other list. function ShowMainList() { var page = "MainList:<br><SELECT NAME='mainlist' onChange='writeList()'>" for (i=0;i<MainList.length;i++) { page+="<OPTION VALUE="+MainList[i] if (i==0) { page+=" SELECTED " } page+=">"+MainList[i] } page+="</SELECT>" document.write(page); } // The sublist. // Here I define as layers as I need. The first visible layer will be the layer with a list of 1 element. // Be sure to put the layer in the correct (top,left) corner... function ShowSubList() { var page = "" for (j=1;j<=MainList.length;j++) { if (j==1) page+="<DIV ID='LSubList"+j+"' style='position:relative; width:20; height:20; z-index:1; top: 0; left: 0; visibility:visible;'>" else page+="<DIV ID='LSubList"+j+"' style='position:relative; width:20; height:20; z-index:1; top: 0; left: 0; visibility:hidden;'>" page+='SubList:<select NAME="sublist'+j+'" size="'+j+'">' for (i=0;i<SubList.length;i++) { page+="<OPTION VALUE="+SubList[i] if (i==0) page+=" SELECTED " page+=">"+SubList[i] } page+="</SELECT>" page+="</DIV>" } document.write(page) } // When there is a change in the main list; I maintain the selected index in the sublist // and change the visibility of the pertinent layers. function ChooseSubList(asize) { document.form1['sublist'+asize].selectedIndex = document.form1['sublist'+lastLayerVis].selectedIndex; document.all['LSubList'+asize].style.visibility="visible" document.all['LSubList'+lastLayerVis].style.visibility="hidden" // Finally I must remember the last layer that is visible. lastLayerVis = asize } // A simple all given the selected index of the item in the main list. function writeList() { ChooseSubList(document.form1.mainlist.selectedIndex+1) } //--> </SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><FORM name=form1><SCRIPT language=javascript> <!-- PrepareData() ShowMainList() ShowSubList() //--> </SCRIPT></FORM><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->