hey guys, having some trouble getting dynamic select boxes to replace option on change. Base idea is to have 2 select boxes, when you change the first the second switches out option. Now I know this is going to be something simple and I could probably do it a different way, so please tell I have been racking my brain for 8 hours. HTML <form action="#" method="post" id="occupation" class="form">
<fieldset>
Occupation<br><select id='slct1' class='sel1' name='sel1'>
<option value='Sur'>Survivor</option>
<option value='Trad'>Tradie</option>
<option value='Stor'>Store Owner</option>
<option value='Pro'>Professional</option>
<option value='Pol'>Police</option>
<option value='Milt'>Military</option>
</select>
Archtype<br><select id='slct2' class='sel1' name='slct2'>
<!-- populated using JavaScript -->
</select>
</fieldset>
</form>
Script <script type='text/worker'>
on('change:sel1)' function (){
var Select_List_Data = {
'slct2'
Sur: {
text: ['Athlete', 'Biker', "Stock Broker","Student"],
value: ['Athlete', 'Biker', "Stock Broker","Student"]
},
Trad: {
text: ['Butcher', 'Carpenter', "Mechanic", "Sparkie"],
value: ['Butcher', 'Carpenter', "Mechanic", "Sparkie"]
},
Stor: {
text: ['Car Yard', 'Gun Store', 'Hardware Store','Super Market'],
value: ['Car Yard', 'Gun Store', 'Hardware Store','Super Market']
},
Pro: {
text: ['Fisherman', "Medical", "Ranger", "Scientist"],
value: ['Fisherman', "Medical", "Ranger", "Scientist"]
},
Pol: {
text: ['Officer', 'Security', 'Riot Squad', 'Sea Patrol'],
value: ['Officer', 'Security', 'Riot Squad', 'Sea Patrol']
},
Milt: {
text: ['Infantry', "MP", "Pilot", "Veteran"],
value: ['Infantry', "MP", "Pilot", "Veteran"]
}
}
}
function removeAllOptions(sel, removeGrp) {
var len, groups, par;
if (removeGrp) {
groups = sel.getElementsByTagName('optgroup');
len = groups.length;
for (var i=len; i; i--) {
sel.removeChild( groups[i-1] );
}
}
len = sel.options.length;
for (var i=len; i; i--) {
par = sel.options[i-1].parentNode;
par.removeChild( sel.options[i-1] );
}
}
function appendDataToSelect(sel, obj) {
var f = document.createDocumentFragment();
var labels = [], group, opts;
function addOptions(obj) {
var f = document.createDocumentFragment();
var o;
for (var i=0, len=obj.text.length; i<len; i++) {
o = document.createElement('option');
o.appendChild( document.createTextNode( obj.text[i] ) );
if ( obj.value ) {
o.value = obj.value[i];
}
f.appendChild(o);
}
return f;
}
if ( obj.text ) {
opts = addOptions(obj);
f.appendChild(opts);
} else {
for ( var prop in obj ) {
if ( obj.hasOwnProperty(prop) ) {
labels.push(prop);
}
}
for (var i=0, len=labels.length; i<len; i++) {
group = document.createElement('optgroup');
group.label = labels[i];
f.appendChild(group);
opts = addOptions(obj[ labels[i] ] );
group.appendChild(opts);
}
}
sel.appendChild(f);
document.form['occupation'].elements['sel1'].onchange = function(e) {
var relName = 'slct2';
var relList = this.form.elements[ relName ];
var obj = Select_List_Data[ relName ][ this.value ];
removeAllOptions(relList, true);
appendDataToSelect(relList, obj);
};
(function() { // immediate function to avoid globals
var form = document.forms['occupation'];
var sel = form.elements['slct1'];
sel.selectedIndex = 0;
var relName = 'slct2';
var rel = form.elements[ relName ];
var data = Select_List_Data[ relName ][ sel.value ];
appendDataToSelect(rel, data);
}());
</script>
