using a multi-select dropdown

richrock · August 28, 2009

I've been stumped at the first hurdle :'(

I'm using a tutorial file at the moment, which I will modify and expand to suit my purposes...

Heres the JS

function fillCategory(){ 
     // this function is used to fill the category list on load
    addOption(document.drop_list.Category, "Fruits", "Fruits", "");
    addOption(document.drop_list.Category, "Games", "Games", "");
    addOption(document.drop_list.Category, "Scripts", "Scripts", "");
}

function SelectSubCat(){
    // ON selection of category this function will work

    removeAllOptions(document.drop_list.SubCat);
    addOption(document.drop_list.SubCat, "", "SubCat", "");

if(document.drop_list.Category.value == 'Fruits'){
    addOption(document.drop_list.SubCat,"Mango", "Mango");
    addOption(document.drop_list.SubCat,"Banana", "Banana");
    addOption(document.drop_list.SubCat,"Orange", "Orange");
}
if(document.drop_list.Category.value == 'Games'){
    addOption(document.drop_list.SubCat,"Cricket", "Cricket");
    addOption(document.drop_list.SubCat,"Football", "Football");
    addOption(document.drop_list.SubCat,"Polo", "Polo", "");
}
if(document.drop_list.Category.value == 'Scripts'){
    addOption(document.drop_list.SubCat,"PHP", "PHP");
    addOption(document.drop_list.SubCat,"ASP", "ASP");
    addOption(document.drop_list.SubCat,"Perl", "Perl");
}

}
////////////////// 

function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
	//selectbox.options.remove(i);
	selectbox.remove(i);
}
}


function addOption(selectbox, value, text )
{
var optn = document.createElement("option");
optn.text = text;
optn.value = value;

selectbox.options.add(optn);
}

And here's my php bit :

<script type="text/javascript" src="templates/khepri/js/list.js"></script>
</head>

<body id="minwidth-body" onload="fillCategory();">

blahblah, lots of other code...

<form name="drop_list" action="yourpage.php" method="post" >
    <select  name="Category" onChange="SelectSubCat();" >
        <option value="">Category</option>
    </select>
        
    <select id="SubCat" name="SubCat">
        <option value="">SubCat</option>
    </select>
</form>

On FF, I get an error stating that document.drop_list is undefined. Being a complete JS n00b, I dunno how to solve this. The line in question is:

addOption(document.drop_list.Category, "Fruits", "Fruits", "");

Any ideas/help/suggestions? I need to get this to work and then can expand it for the other dropdowns via DB/PHP folder reads...

Psycho · August 29, 2009

Those are not multi-select lists. It also works fine for me in FF, so I'm not sure what problem you are having.

In any event, I think that code can be improved.

1. There is no need to use JavaScript to populte the main category list since it is not dynamic - just populate it initially.

2. The scripts are too dependant on the data. All the IF statements are looking for specific values. It is better, in my opinion, to separate the data from the logic.

The scriopt below is much more flexible in my opinion. You can add additional categories and subcategories without updaing the logic, just add additional arrays for the data.

<html>
<head>
<script>

var subcategories = new Array();
subcategories['Fruits'] = new Array(
    ['Mango', 'Mango'],
    ['Banana', 'Banana'],
    ['Orange', 'Orange']
);

subcategories['Games'] = new Array(
    ['Cricket', 'Cricket'],
    ['Football', 'Football'],
    ['Polo', 'Polo']
);
subcategories['Scripts'] = new Array(
    ['PHP', 'PHP'],
    ['ASP', 'ASP'],
    ['Perl', 'Perl']
);

function updateSubCat(categoryObj, subCatSelectID)
{
    var selectedVal = categoryObj.options[categoryObj.selectedIndex].value;
    var subCatSelectObj = document.getElementById(subCatSelectID);

    if (subcategories[selectedVal])
    {
        optionList = subcategories[selectedVal];
        subCatSelectObj.disabled = false;
    }
    else
    {
        optionList = [['Select a Category','']];
        subCatSelectObj.disabled = true;
    }

    //Empty the list & repopulate
    subCatSelectObj.options.length = 0;
    addOptionsList(subCatSelectObj, optionList)
    return;
}

function addOptionsList(selectObj, optionList)
{
    optLength = optionList.length;
    for (var i=0; i<optLength; i++)
    {
        var optn = document.createElement("option");
        optn.text = optionList[i][0];
        optn.value = optionList[i][1];
        selectObj.options.add(optn);
    }

}

</script>
</head>

<body>
<script type="text/javascript" src="templates/khepri/js/list.js"></script>
</head>

<body id="minwidth-body">

blahblah, lots of other code...

<form name="drop_list" action="yourpage.php" method="post" >
    <select  name="Category" onChange="updateSubCat(this, 'SubCat');" >
        <option value="">Category</option>
        <option value="Fruits">Fruits</option>
        <option value="Games">Games</option>
        <option value="Scripts">Scripts</option>
    </select>
        
    <select id="SubCat" name="SubCat" disabled="disabled">
        <option value="">Select a Category</option>
    </select>
</form>


</body>
</html>

Sign In

using a multi-select dropdown

Recommended Posts

richrock

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information