PDA

View Full Version : HTML Checkbox adds/subtracts items in menu



tike0rz
Nov 26th, 2009, 01:04 AM
Not sure how easy this is, but I would like to have 4 checkboxes that effect the items shown in a drop down menu.

For example:
[x] School #1
[x] School #2
[ ] School #3

The drop down (select) box will only show the majors that are offered at the checked schools. I know this involves either hiding or showing the certain elements of the drop down menu, but I'm not well versed in JS.

Thanks in advance.

jmrker
Nov 26th, 2009, 01:17 AM
The following is a 'drop down' solution, but it should give you the idea to translate to radio buttons if truly desired.
See: http://javascript.internet.com/forms/multi-value-drop-down-list.html

Otherwise, post the code you are trying so we don't have to start from scratch.

tike0rz
Nov 26th, 2009, 03:34 AM
I needed multiple checkboxes that effect separate drop down menus, or just a single drop down menu. Thats almost what I need, but not quite. What can I provide for help?

Again,

when [ ] School 1 is checked, only the subjects pertaining to that school will be shown in the drop down menu. When [ ] School 2 is checked along with [ ] School 1, the drop down menu will contain all items pertaining to both schools, and so on.

I have not found any way that checkboxes can effect drop down menus. I even tried the javascript provided above to create separate functions for separate drop down boxes.

Old Pedant
Nov 26th, 2009, 03:51 AM
<html>
<head>
<script type="text/javascript">
var majors = {
"Math" : [ 1,2,3,],
"English" : [ 1,2,3 ],
"Russian" : [ 1,2,3 ],
"Underwater Basket Weaving" : [ 4 ],
"Sports" : [ 2, 3, 4 ]
};

Array.prototype.isMember = function( find )
{
for ( var i = 0; i < this.length; ++i )
{
if ( this[i] == find ) return true;
}
return false;
}
function resetOptions( )
{
var form = document.theForm;
var sel = form.Majors;
for ( var s = sel.options.length-1; s > 0; --s )
{
sel.options[s] = null;
}

var checked = [ ];
for ( var cb = 0; cb < form.schools.length; ++cb )
{
if ( form.schools[cb].checked ) checked.push( form.schools[cb].value );
}
for( major in majors )
{
var mschools = majors[major];
for ( var c = 0; c < checked.length; ++c )
{
if ( mschools.isMember( checked[c] ) )
{
sel.options[sel.options.length] = new Option( major, major );
break;
}
}
}
}
</script>
</head>
<body>
<form name="theForm">
Schools:<br/>
<input type="checkbox" name="schools" value="1" onclick="resetOptions()"> Big State University
<input type="checkbox" name="schools" value="2" onclick="resetOptions()"> Enormous Private College
<input type="checkbox" name="schools" value="3" onclick="resetOptions()"> Joe College
<input type="checkbox" name="schools" value="4" onclick="resetOptions()"> Podunk City J.C.
<br/><br/>
Majors: <select name="Majors">
<option value="">Select a major</option>
</select>
</form>
</body>
</html>

Old Pedant
Nov 26th, 2009, 03:52 AM
Posted that about 20 minutes ago, but once again this forum lost a post by me.

So hopefully this one sticks.

tike0rz
Nov 26th, 2009, 03:59 AM
Thats exactly what I meant. Thank you so much kind sir.

Philip M
Nov 26th, 2009, 07:00 PM
As more than one checkbox can be selected at a time, would not radio buttons be more suitable?

tike0rz
Nov 26th, 2009, 08:11 PM
One small question though, how do I assign a value to the list entities (majors)?

tike0rz
Nov 26th, 2009, 08:12 PM
As more than one checkbox can be selected at a time, would not radio buttons be more suitable?

Well...checkbox, radio button, same thing. As long as the user can select multiple.

jmrker
Nov 26th, 2009, 08:35 PM
One small question though, how do I assign a value to the list entities (majors)?

Change the second 'major' value to the value you want selected in this line.


sel.options[sel.options.length] = new Option( major, major );


Also,

Well...checkbox, radio button, same thing. As long as the user can select multiple.

Quite a bit of difference. You will get majors not available at certain colleges using the multiple checkboxes while changing to radio buttons will allow ONLY the majors associated with the particular selection chosen. I would not want to sign up at a high class university and find that my selection of 'Underwater Basket Weaving' is not available. :D

Are you trying to select multiple majors, not colleges?

tike0rz
Nov 26th, 2009, 08:43 PM
Change the second 'major' value to the value you want selected in this line.


sel.options[sel.options.length] = new Option( major, major );



The separate majors need their own separate values, so I can query from the database. I'm looking for a way to hard code the values for each major beforehand.



Quite a bit of difference. You will get majors not available at certain colleges using the multiple checkboxes while changing to radio buttons will allow ONLY the majors associated with the particular selection chosen. I would not want to sign up at a high class university and find that my selection of 'Underwater Basket Weaving' is not available. :D

Are you trying to select multiple majors, not colleges?

Yes and No, because my users are inept, they do not want to see ALL majors at one time. For the school they select, they would like to only see those majors pertaining to those school(s). Do you think there is a better way around this?

tike0rz
Nov 26th, 2009, 10:20 PM
Solved this problem. Thanks.