asked on

JavaScript auto-populate checkboxes based on dropdown selection

Hi all,

I am currently using the following code to auto-populate a second dropdown box based on the selection of the first box.

The code is from http://www.plus2net.com/javascript_tutorial/dropdown-list.php

How can I modify the code so that the second dropdown is a checkbox list instead of a dropdown allowing multiple selections?

I need to use a client side script as the site is on a CMS that will not allow server side scripting.

If it can't be done using a checkbox list can you suggest an alternative way to do it that will allow multiple selections of the second list?

Also is there a nicer way to achieve this with maybe jQuery or some other option?

Thank you.

GW.

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>(Type a title for your page here)</title>
<script language="javascript" src="list.js"></script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onload="fillCategory();">
<FORM name="drop_list" action="yourpage.php" method="POST" >
<SELECT  NAME="Category" onChange="SelectSubCat();" >
<Option value="">Category</option>
</SELECT>&nbsp;
<SELECT id="SubCat" NAME="SubCat">
<Option value="">SubCat</option>
</SELECT>
</form>
</body>
</html>
 
 
 
// And in the list.js file
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);
}

Open in new window

GhostWerx

ASKER

Hi all,

perhaps a solution could integrate the idea at http://c82.net/samples/checklist-samples.html where they have scrollable check-boxes.

My JavaScript knowledge is not the best so any help would be appreciated.

Thanks,

GW.

ASKER CERTIFIED SOLUTION

quincydude

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

quincydude

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kin Fat SZE

tested on ie6,ff3

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>(Type a title for your page here)</title>
<script language="javascript" src="list.js"></script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onload="fillCategory();">
<FORM name="drop_list" action="yourpage.php" method="POST" >
<SELECT  NAME="Category" onChange="SelectSubCat2();" >
<Option value="">Category</option>
</SELECT> 
<SELECT id="SubCat" NAME="SubCat">
<Option value="">SubCat</option>
</SELECT>
</form>
</body>
</html>
 
 
 <script language="javascript">
// And in the list.js file
 
function SelectSubCat2(){
 
var i;
var container = document.drop_list;
var cn = container.childNodes;
 
  for (var i = 0; i < cn.length; i++){
//    alert(cn[i].nodeName);
    if (cn[i].type == 'checkbox' || cn[i].nodeName == 'DIV'){
      container.removeChild(container.childNodes[i]);
      i-=1;
    }
  }
  
  if (container.Category.value == 'Fruits'){
    addCheckBox(container, 'Fruits','Mango');
    addCheckBox(container, 'Fruits','Banana');
    addCheckBox(container, 'Fruits','Orange');
  }
  if (container.Category.value == 'Games'){
    addCheckBox(container, 'Games','Cricket');
    addCheckBox(container, 'Games','Football');
    addCheckBox(container, 'Games','Polo');
  }
  if (container.Category.value == 'Scripts'){
    addCheckBox(container, 'Scripts','PHP');
    addCheckBox(container, 'Scripts','ASP');
    addCheckBox(container, 'Scripts','Perl');
  }
}
 
function addCheckBox(formObj, vName, vValue ){
  var newDiv = document.createElement("div");
  newDiv.innerHTML = vValue;
  formObj.appendChild(newDiv);
  var newCheckBox = document.createElement("input");
  newCheckBox.type = 'checkbox';
  newCheckBox.name = vName;
  newCheckBox.value = vValue;
  formObj.appendChild(newCheckBox);
}
 
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);
}
</script>

Open in new window

GhostWerx

ASKER

Hi quincydude,

Major help so far. Its all working.

Just one last thing I need help with.

How can I add an option to the check boxes such as onchange="collectSelections();"

so that collectSelections() collects the values of all the selected checkboxes and combines them together in the format "selection 1, selection 2, etc..." and then copies that value into a hidden text input field for submission?

Thank you for your help so far.

GW.

SOLUTION

quincydude

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

GhostWerx

ASKER

Alright I think we're almost there.

How do I append the onclick="collectSelections(this.form);" to the check boxes??

Thanks.

SOLUTION

quincydude

membership