mediasource.saymikeo.com
At the bottom of this page, click the web or video big white box. Then turn your attention to the select boxes.
When you select either of the first two choices, another box should pop up next to the select box. That box should populate with other choices.
1. My problem is the secondary box does not populate with the correct data.
2. When you select option 3 or 4 the box should disappear.
This works in Firefox. This is done through a JSON call in Mootools.
If you can figure this out I will think you are totally awesome. First for going through my messy code and second for being able fix it.
Your assistance is greatly appreciated.
This is the base function that calls view_category() which calls add_select_box();
Code:
function build_page(url, id){
$('ajax_box').set('html', '');
dbug.log('Obj URL: ', id, url);
// Get the requested view
var view = new Request.JSON({
url: url, onSuccess: function(jsonObj){
view_category(jsonObj.selectbar, id);
}
}).send().chain(function(){
new Fx.Tween(service).start('opacity', '1');
});
}
This is the view_category function. Its purpose is to build everything below the select box. It calls the add_select_box.
Code:
// Viewing the Title, Description and sub descriptions
function view_category(oSelect, id){
add_select_box(oSelect, id);
oSelect.each(function(oOptions){
if(oOptions.id == id){
var service_type = new Element('div', {id: oOptions.id, 'class': 'sub_choice'}).inject($('ajax_box'), 'bottom');
oOptions.options.each(function(oSub){
var blank_div = new Element('div').inject(service_type, 'bottom'); // Needed for the Expand Link to work
var service_title = new Element('h2').set('html', oSub.title).inject(blank_div, 'bottom'); // Title
var service_description = new Element('p').set('html', oSub.description).inject(blank_div, 'bottom'); // Description
var expand = new Element('div', {'class': 'expanding'}).inject(blank_div, 'bottom'); // Expanding Sub Box
if(oSub.sub != undefined){
// Expanding and Colapsing Link
var service_elink = new Element('a', {href: 'javascript:void(0)', onclick: 'expand(this); return false'}).set('html', 'more').inject(service_description);
oSub.sub.each(function(oSubOptions){
var sub_div = new Element('div').inject(expand, 'bottom');
var sub_title = new Element('h3').set('html', oSubOptions.title).inject(sub_div, 'bottom'); // Sub Title
var sub_description = new Element('p').set('html', oSubOptions.description).inject(sub_div, 'bottom'); // Sub description
if(oSubOptions.sub_description != undefined){
var sub_elink = new Element('a', {href: 'javascript:void(0)', onclick: 'expand(this); return false'}).set('html', 'more').inject(sub_description);
var sub_expanding = new Element('div', {'class': 'expanding'}).inject(sub_div, 'bottom'); // Sub Sub Expanding
var sub_sub_description = new Element('p').set('html', oSubOptions.sub_description).inject(sub_expanding, 'bottom'); // Sub Sub Description
};
});
};
});
}
});
};
This code adds the select box and changes the select box when the select button is changed.
Code:
function add_select_box(oSelect, id){
var select_box = new Element('div', {id:'select_box'}).inject($('ajax_box'));
var formSelectVar = new Element('select');
oSelect.each(function(item){
if(item.id == id){
var continue_div = new Element('div', {id:'continue'}).inject(select_box);
new Element('a', {href:'javascript:void(0)'}).inject(continue_div);
if(item.id == id){
// Create each option for the first select box
item.options.each(function(myArray){
var formOption = new Element ('option').set('html', myArray.title).inject(formSelectVar);
});
new Element('option', {selected:'selected'}).set('html', 'Choose').inject(formSelectVar, 'top');
formSelectVar.inject($('select_box'), 'top' ); // This is the First Select Box
$('ajax_box').getElement('select').addEvent('change', function(){// Listen for the select box to change
var categoryValue = $('ajax_box').getElement('select').value;
if($('sub_select')){
var formSelectVar = $('sub_select').set('html', '');
}else {
var formSelectVar = new Element('select', {id:'sub_select'});
}
// Make a secondary select box for additional options
var notdefined;
item.options.each(function(myArray){
if(myArray.sub != undefined && myArray.title == categoryValue){
dbug.log('Secondary Select: ', myArray.sub, myArray.title, categoryValue)
myArray.sub.each(function(subArray){
var formOption = new Element ('option').set('html', subArray.title).inject(formSelectVar);
});
notdefined = false;
}else if(myArray.title == categoryValue){
dbug.log('Else Dialoge: ', myArray.sub, myArray.title, categoryValue)
notdefined = true;
}
});
dbug.log('Not Defined: ', notdefined);
if(notdefined != true){
new Element('option', {selected: 'selected'}).set('html', 'Choose').inject(formSelectVar, 'top');
formSelectVar.inject($('select_box')); // This is the second select box
}else{
formSelectVar.dispose();
}
});
};
}
});
};
Before you post, read our: 
