I have some Javascript code that creates 2 arrays: One for Product Category and one for Product.
But before the user can choose the Product Category or Product, they have to choose the type of Campaign they wish to use. Thus, the selection (event) of the 'Campaign', triggers the hidden drop-down menu from which to choose the Product Category. Once the Product Category is chosen, the Product drop-down populates and the user is allowed to choose from the appropriate options.
My only problem: the Product Category does not populate correctly. The options are invisible, but once I select one - the Product options drop-down populates accordingly. I'm super confused....
Here's the JScript code:
<script type="text/javascript">
var info = new Array(
"Select One*Select One|Select One",
"Mortgage*1yr NegAm|3yr ARM|5yr ARM|7yr ARM|15yr FRM|30yr FRM",
"Home Equity*HELoan|HELOC|Convertible",
"Credit Card*Standard|Premium|Charge|Limited|Secured|Pre-Paid|Business",
"Student Loan*Subsidized|Unsubsidized|Undergrad|Graduate|Refi",
"Auto Loan*Purchase|Lease|Used|Dealer"
);
function stringSplit ( string, delimiter ) {
if ( string == null || string == "" ) {
return null;
} else if ( string.split != null ) {
return string.split ( delimiter );
}
}
var menu1 = new Array();
var menu2 = new Array();
function createMenus() {
for ( var i=0; i < info.length; i++ ) {
menu1[i] = stringSplit ( info[i], '*' );
menu2[i] = stringSplit ( menu1[i][1], '|' );
}
var b = document.selector.dropnum.options[document.selector.dropnum.options.selectedIndex].value;
var myFormx = myForm + b;
var prodcat = document.myFormx.main;
var product = document.myFormx.title;
prodcat.length = menu1.length;
product.length = menu2[0].length;
for ( var i=0; i < menu1.length; i++ ) {
prodcat.options[i].value = menu1[i][0];
prodcat.options[i].text = menu1[i][0];
}
document.myFormx.main.selected = 0;
for (var x=0; x < menu2[0].length; x++) {
product.options[x].text = menu2[0][x];
product.options[x].value = menu2[0][x];
}
document.myFormx.title.selected = 0;
}
function updateMenus ( what ) {
var sel = what.selectedIndex;
if ( sel >= 0 && sel < menu1.length )
var temp = menu2[sel];
else
var temp = new Array ();
what.form.title.length = temp.length;
for ( var i = 0; i < temp.length; i++ ) {
what.form.title.options[i].text = temp[i];
what.form.title.options[i].value = temp[i];
}
what.form.title.selected=0;
}
</script>
Here's the code from my .php file:
<html>
<body onLoad="createMenus()">
<br>
<br>
<form name="selector" action="#" method="post"> <!-- This is where you add a link to the 'Dials' tab -->
Select the Campaign methodology to model:
<select id='campnum' name='dropnum' class='css_button_example' onChange="javascript: ShowMenu(document.getElementById('campnum').value, 'camp', 5);">
<option value='0'>Select Campaign
<option value='1'>Retention Campaign
<option value='2'>Acquisition Campaign
<option value='3'>Cross-Sell Campaign
<option value='4'>Up-Sell Campaign
</select>
</form>
<div name="newboxes" id="camp0" style="display: none;" href="javascript:showonlyone('camp0');">
</div>
<!--*************************************************Retention Campaign************************************************-->
<div name="newboxes1" id="camp1" style="display: none;" href="javascript:showonlyone('camp1');">
<form name="myForm1"><p>
Product Category:
<select name="main" size=1 onChange="updateMenus(this)">
<option>
<option>
<option>
</select>
Product:
<select name="title" size=1>
<option>
<option>
<option>
</select>
</form>
</div>
</body>
</html>
Regards,
Vijay