Full version: jsB@nk » Form » Dropdown » Category Form Script
URL: https://www.javascriptbank.com/category-form-script.html
When an item from the first JavaScript menu categories are selected a different set of items in the second JavaScript menu are loaded.
Full version: jsB@nk » Form » Dropdown » Category Form Script
URL: https://www.javascriptbank.com/category-form-script.html
<script language="Javascript"> var arrayData = new Array(); arrayData[0]= 'SALES|[SAL] User 01|' arrayData[1]= 'SALES|[SAL] User 02|' arrayData[2]= 'SALES|[SAL] User 03|' arrayData[3]= 'MARKETING|[MAR] User 01|' arrayData[4]= 'MARKETING|[MAR] User 02|' arrayData[5]= 'MARKETING|[MAR] User 03|' arrayData[6]= 'TECHNOLOGY|[TEC] User 01|' arrayData[7]= 'TECHNOLOGY|[TEC] User 02|' arrayData[8]= 'TECHNOLOGY|[TEC] User 03|' function populateData( name ) { select= window.document.form.SubCategory; string= ""; // 0 - will display the new options only // 1 - will display the first existing option plus the new options count= 0; // Clear the old list (above element 0) select.options.length = count; // Place all matching categories into Options. for( i = 0; i < arrayData.length; i++ ) { string = arrayData[i].split( "|" ); if( string[0] == name ) { select.options[count++] = new Option( string[1] ); } } // Set which option from subcategory is to be selected //select.options.selectedIndex = 2; // Give subcategory focus and select it //select.focus(); } </script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><table cellpadding=4 cellspacing=0 border=0> <tr> <form name=form method=post action=""> <td><span class=DefMenuText>Departments</span><br> <select name='category' size=3 style="width:120;" onChange='javascript:populateData( this.options[selectedIndex].text )'> <option>SALES</option> <option>MARKETING</option> <option>TECHNOLOGY</option> </select> </td> <td><span class=DefMenuText>Department Users</span><br> <select name="SubCategory" size=3 style="width:120;"> </select> </td> </form> </tr> </table><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->