• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1779
  • Last Modified:

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

0
GhostWerx
Asked:
GhostWerx
  • 4
  • 4
4 Solutions
 
GhostWerxAuthor 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.
0
 
quincydudeCommented:
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

0
 
quincydudeCommented:
the div should be named with id SubCat in my example
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

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

0
 
GhostWerxAuthor 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.
0
 
quincydudeCommented:
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

0
 
GhostWerxAuthor Commented:
Alright I think we're almost there.

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

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

newcheck.setAttribute('onclick', 'collectSelections(this.form)');
0
 
GhostWerxAuthor Commented:
You are awesome. Thanks heaps!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now