Forum Moderators: open
I am looking for a script which shows or hides select boxes ( upto max of 7) based on the number selected on one select box. Example:
In a Select Box the number 3 is selected, at that moment I need 3 select boxes to be displayed just below that select box.
I hope it is clear. Any assistance or indication to a ready made script will be appreciated.
Thanks,
Habtom
If I am understanding you correctly, then you want to create checkboxes on the fly.
Here, I delete all the checkboxes each time, then I recreate the number I need and add them to the document.
You'll find the code for 2 files which should help you get started. Let us know any questions! :)
index.html
<html>
<head>
<title>Creating checkboxes according to a selection demo</title>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<form>
<select id="numBoxes">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<br />
<div id="checkBoxArea">
</div>
<a href="javascript:createCheckboxes();">Do it!</a>
</select>
</form>
</body>
</html>
script.js
var countries = Array();
var values = Array();
function createCheckboxes()
{
var checkBoxArea = document.getElementById('checkBoxArea');
var numBoxesSelect = document.getElementById('numBoxes');
var numBoxes;
// firstly, we will remove all checkboxes
while (checkBoxArea.firstChild)
{
checkBoxArea.removeChild(checkBoxArea.firstChild);
}
numBoxes = numBoxesSelect.options[numBoxesSelect.selectedIndex].value;
var newCheckbox;
for (i=0; i<numBoxes; i++)
{
newCheckbox = document.createElement('input');
newCheckbox.setAttribute("type", "checkbox");
newCheckbox.setAttribute("value", i);
checkBoxArea.appendChild(newCheckbox);
}
}
Habtom
