We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

JavaScript auto-populate checkboxes based on dropdown selection

Medium Priority
2,054 Views
Last Modified: 2012-05-06
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

Comment
Watch Question

Author

Commented:
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.
This may help

First change the select on line 12-14 of your code to a div

<div id="bb">
</div>

then try the following functions instead
<script type="text/javascript">
 
function SelectSubCat(){
// ON selection of category this function will work
 
removeAllOptions("SubCat");
 
addOption("SubCat","sub","Mango", "Mango");
addOption("SubCat","sub","Banana", "Banana");
addOption("SubCat","sub","Orange", "Orange");
 
}
 
function addOption(id, name ,value, text)
{
 
var b = document.getElementById(id);
 
var newcheck= document.createElement('input');
var span= document.createElement('span');
var br = document.createElement('br');
 
newcheck.setAttribute('type','checkbox');
newcheck.setAttribute('name', name);
newcheck.setAttribute('value', value);
 
span.innerHTML = text;
 
b.appendChild(br);
b.appendChild(span);
b.appendChild(newcheck);
}
 
function removeAllOptions(div)
{
  var b = document.getElementById(div);
  b.innerHTML = "";
}
</script>

Open in new window

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
the div should be named with id SubCat in my example
CERTIFIED EXPERT

Commented:
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

Author

Commented:
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.
say you have the hidden field like
<input type="hidden" name="hidinput" id="hidinput">

and check box named 'sub'

you can use the following function on onclick on all checkboxes
onclick="collectSelections(this.form);"


function collectSelections(theform)
{
var selected = '';
 
for(var i=0; i < theform.sub.length; i++){
if(theform.sub[i].checked)
 if(selected == '')
    selected = theform.sub[i].value;
 else
    selected = selected + ',' + theform.sub[i].value;
}
 
  theform.hidinput.value = selected;
 
}

Open in new window

Author

Commented:
Alright I think we're almost there.

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

Thanks.
just add this line to the addOption() function at line 26 I posted above will do

newcheck.setAttribute('onclick', 'collectSelections(this.form)');

Author

Commented:
You are awesome. Thanks heaps!!
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.