»
EnglishFrenchVietnamese

Print - Category Form Script - JavaScriptBank.com

Full version: jsB@nk » Form » Dropdown » Category Form Script
URL: https://www.javascriptbank.com/category-form-script.html

Category Form Script © JavaScriptBank.comWhen 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



JavaScript
<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-->


HTML
<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-->