Dynamic Drop Down Boxes
Hello all,
I have an understanding of how to create a dynamic drop down box using a switch statement and arrays to populate it. What I do not know how to do is use multiple drop down information to filter information etc.
This is what I have so far...
The HTML...
The JavaScript...HTML Code:<body> <select name="brand" id="brand" onchange="fillPhones()"> <option>Select</option> <option value="samsungPhones">Samsung</option> <option value="applePhones">Apple</option> <option value="nokiaPhones">Nokia</option> </select> <br /><br /> <select name="phones" id="phones" style="width: 120px"></select> <br /><br /> </body>
I would be looking to add another two dynamic drop down boxes but not sure how?PHP Code:
function fillPhones()
{
//clears dropdowns and price
phones.options.length = 0;
//retrieves index of selected phone brand and target element to be populated
var e = document.getElementById("phones");
var brand = document.getElementById("brand").selectedIndex
//switch statements fill target with phone array
switch (brand)
{
case 1:
var arr = new Array("Select...", "Galaxy S3", "Galaxy Note");
fillList(arr, e);
break;
case 2:
var arr = new Array("Select...", "iPhone 5", "iPhone 4S");
fillList(arr, e);
break;
case 3:
var arr = new Array("Select...", "Lumia 920", "Lumia 800");
fillList(arr, e);
break;
}
}
//function to populate dropdown list
function fillList(arr, e)
{
e.options.length = 0;
for (var i = 0; i < arr.length; i++)
{
option = new Option(arr[i], arr[i]);
e.options[i] = option;
}
}
Reply With Quote
Bookmarks