Jump to content

build a checkbox list based on selection of drop down form field


svgmx5

Recommended Posts

i want to build a checkbox list that displays information based on the selection from a drop down menu.

 

So if someone selects cars i want a the following options to display as a checklist

 

so it wold be .... cars->chevy, ford, nissan to be displayed in a checklist format, that way they can select the options they want

 

I'm really new to JavaScript so i'm not sure how to start.

 

I hope someone here can help me

I would just build all of the checkbox lists and then use style properties to show/hide the appropriate lists.

 

Example:

<html>
<head>
  
<script type="text/javascript">

function showList(selectObj)
{
    var lists = new Array('cars', 'computers', 'sports');
    var selectedListID = selectObj.options[selectObj.selectedIndex].value;
    var divObj;

    for(i=0; i<lists.length; i++)
    {
        divObj = document.getElementById(lists[i]);
        divObj.style.display = (selectedListID==lists[i]) ? '' : 'none';
    }
    return;
}

window.onload = function()
{
    showList(document.getElementById('listType'));
    return;
}
</script>
</head>
<body>

<select name="listType" id="listType" onchange="showList(this);">
  <option value="cars">Cars</option>
  <option value="computers">Computers</option>
  <option value="sports">Sports</option>
</select>
<br />
<div id="cars">
  <input type="checkbox" name="cars[]" value="Honda"> Honda<br />
  <input type="checkbox" name="cars[]" value="Ford"> Ford<br />
  <input type="checkbox" name="cars[]" value="Toyota"> Toyota<br />
</div>
<div id="computers">
  <input type="checkbox" name="computers[]" value="Dell"> Dell<br />
  <input type="checkbox" name="computers[]" value="HP"> HP<br />
  <input type="checkbox" name="computers[]" value="Alienware"> Alienware<br />
</div>
<div id="sports">
  <input type="checkbox" name="sports[]" value="Football"> Football<br />
  <input type="checkbox" name="sports[]" value="Basketball"> Basketball<br />
  <input type="checkbox" name="sports[]" value="Baseball"> Baseball<br />
</div>

</body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.