Menu
In the following example, I use the function “SetUp(SBox,AObjStr)” to send an object reference to the function “Populate(SBox,SObj)”.
Seems to work OK, but it is a 2 step process to assign the JSON objects to the selected drop-down boxes.
Fairly easy, but somewhat tedious, to change to fewer or more levels as desired with a common bit of code.
However, what I would like to do is simplify it a bit more … 😮
Is there a way to bypass the “SetUp” function to “Populate” the multi-level drop downs directly? ?
I think what I’m looking for is a way to pass a string in the function that would be recognized as an object (in this case a JSON or other form of array)
and be decoded to add options to the drop-down choices,
but I don’t have a clue as to how that might be accomplished without the extra “SetUp” function!
Anyone have an idea I could try? ?
[code]
<html>
<head>
<title> Passing Object Indirectly </title>
<script type=”text/javascript”>
// var SelectLine = [‘transportation’,’type’,’model’];
var Transport = { ‘Select’:”,’Air’:’Air’,’Land’:’Land’,’Sea’:’Sea’ };
var Air = { ‘Select’:”,’Planes’:’Planes’,’Motorized Ultralight’:’Ultralight’,’Free-flight Glider’:’Glider’ };
var Planes = { ‘Select’:”,’747′:”,’737′:”,’Cessna’:” };
var Ultralight = { ‘Select’:”,’Kolb Flyer’:”,’Kitfox’:” };
var Glider = { ‘Select’:”,’Schwietzer Glider’:” };
var Land = { ‘Select’:”,’Car’:’Car’,’Truck’:’Truck’,’Train’:’Train’ };
var Car= { ‘Select’:”,’BMW Z3′:”,’Chevy Malibu’:”,’Lincoln LS’:” };
var Truck = { ‘Select’:”,’F-150′:”,’S-10′:”,’Tahoe’:” };
var Train= { ‘Selectl’:”,’Freight Train’:”,’Passenger Train’:” };
var Sea = { ‘Select type’:”,’Ship’:’Ship’,’Boat’:’Boat’,’Submarine’:’Submarine’ };
var Ship = { ‘Select’:”,’Oil Tanker’:”,’Cruise’:”,’Yacht’:” };
var Boat = { ‘Select’:”,’Cris-Craft’:”,’Ski’:”,’Sail’:”,’Oar’:” };
var Submarine = { ‘Select’:”,’Los Angeles Class’:”,’Kilo Class’:”,’Seawolf Class’:” };
function Populate(SBox,SObj) {
oSel = document.getElementById(SBox);
oSel.options.length = 0;
// oSel.options[oSel.options.length] = new Option(‘Select an option’,”,false,false);
for (var x in SObj) {
oSel.options[oSel.options.length] = new Option(x,SObj[x], false,false);
}
oSel.selectedIndex = 0;
}
/* alternate version of above
function Populate(SBox,SObj) {
oSel = document.getElementById(SBox);
oSel.options.length = 0;
var tarr = []; for (var x in SObj) { tarr.push(x); } // could tarr.sort() something!
oSel.options[oSel.options.length] = new Option(tarr[0],”,false,false);
for (var i=1; i<tarr.length; i++) {
oSel.options[oSel.options.length] = new Option(tarr[i],SObj[tarr[i]], false,false);
}
oSel.selectedIndex = 0;
}
*/
function SetUp(SBox,AObjStr) { // alert(SBox+’n’+level);
switch(AObjStr) {
case ‘Transport’: Populate(SBox,Transport); break;
case ‘Air’: Populate(SBox,Air); break;
case ‘Planes’: Populate(SBox,Planes); break;
case ‘Ultralight’: Populate(SBox,Ultralight); break;
case ‘Glider’: Populate(SBox,Glider); break;
case ‘Land’: Populate(SBox,Land); break;
case ‘Car’: Populate(SBox,Car); break;
case ‘Truck’: Populate(SBox,Truck); break;
case ‘Train’: Populate(SBox,Train); break;
case ‘Sea’: Populate(SBox,Sea); break;
case ‘Ship’: Populate(SBox,Ship); break;
case ‘Boat’: Populate(SBox,Boat); break;
case ‘Submarine’: Populate(SBox,Submarine); break;
case ”: break;
default : alert(‘Invalid entry: ‘+level); break; // should never occur with good choices
}
}
onload = function() { SetUp(‘SBox0′,’Transport’); }
</script>
</head>
<body>
<select id=”SBox0″ onchange=”SetUp(‘SBox1’,this.value)”></select>
<select id=”SBox1″ onchange=”SetUp(‘SBox2’,this.value)”></select>
<select id=”SBox2″></select>
</body>
</html>
<!–
/* Could also be 5 level display
// Country – Province_State – City – Restaurant – Profile
var Country = { ‘Select country’:”,’Canada’:’Canada’,’Mexico’:’Mexico’,’United States’:’USA’ }
var USA = { ‘Select state’:”,’AL’:Alabama,’AK’:’Alaska’,’AZ’:’Arizona’,’AR’:’Arkansas’,’FL’:’Florida’ }
var Florida = { ‘Select city’:”,’Ft. Lauderdale’:’FTL’,’Miami’:’MIA’,’Tallahassee’:’TAL’ }
var FTL = { ‘Select restaurant’:”,’Burger King’:’ftlBK’:”,’Arby’s’:’ftlAR’ }
var ftlBK = { ‘Fast Food’:” }
var ftlAR = { ‘Fast Food’:” }
var MIA = { ‘Select restaurant’:”,’Burger King’:’miaBK’:”,’Arby’s’:’miaAR’ }
var miaBK = { ‘Fast Food’:” }
var miaAR = { ‘Fast Food’:” }
var TAL = { ‘Select restaurant’:”,’Krystal’:’talKR’:”,’Hardy’s’:’talHR’ }
var talKR = { ‘Fast Food’:” }
var talHR = { ‘Fast Food’:” }
function SetUp(SBox,level) { // alert(SBox+’n’+level);
switch(level) {
case ‘Country’: Populate(SBox,Country); break;
case ‘Canada’: Populate(SBox,Canada); break;
…
case ‘Mexico’: Populate(SBox,Mexico); break;
…
case ‘USA’: Populate(SBox,USA); break;
…
case ‘Florida’: Populate(SBox,Florida); break;
…
case ‘FTL’: Populate(SBox,FTL); break;
…
case ‘ftlBK’: Populate(SBox,ftlBK); break;
…
case ”: break;
default : alert(‘Invalid entry: ‘+level); break; // should never occur with good choices
}
}
<select id=”SBox0″ onchange=”SetUp(‘SBox1’,this.value)”></select>
<select id=”SBox1″ onchange=”SetUp(‘SBox2’,this.value)”></select>
<select id=”SBox2″ onchange=”SetUp(‘SBox3’,this.value)”></select>
<select id=”SBox3″ onchange=”SetUp(‘SBox4’,this.value)”></select>
<select id=”SBox4″></select>
*/
–>