Show drop down menu options depending on checkbox clicked

This site is best viewed in a modern browser with JavaScript enabled.

Show drop down menu options depending on checkbox clicked

pc_mac

Hi everyone

I was wondering if anyone can suggest the best way to go about the following:

I have about 12 checkboxes. When a checkbox is click the corresponding drop down menu's appear.
There are about 9 drop down menu options in total.

So for example if checkbox 1 is clicked - drop down menus 1, 2, 5 and 6 appear
if checkbox 2 is clicked - drop down menus 2, 3, 4, 5 and 6 appear and so on....

I have done a simple show and hide div but this doesn't work as I have duplicated the drop down menu so the server side code doesn't work and no data is retrieved.

Whats the best way to achieve this?
if checkbox 1 is clicked - drop down menus 1, 2, 5 and 6 appear
if checkbox 2 is clicked - drop down menus 2, 3, 4, 5 and 6 appear
if checkbox 3 is clicked - drop down menus 1, 2, 6 and 12 appear
if checkbox 4 is clicked - drop down menus 1, 2, 3, 4 ,5, 6 and 11 appear ...etc...

The drop down menu are dynamic as well and I am using PHP.

Hope someone can direct me the best way to do this?

Many thanks

Kevin2

This would be a lot easier with either a select or radio buttons instead of checkboxes. There's an example using a select (aka "dropdown") in this thread:
http://www.webdeveloper.com/forum/showthread.php?290961-lt-select-gt-and-Javascript

It could be expanded to your needs relatively easily.

JMRKER

Yes, you can use checkboxes, but it is much cleaner to use radio buttons.
Modify this to your heart's content.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style type="text/css">
 select { display:none; }
</style>

<title> Untitled </title>

</head>
<body>
<input type="radio" name="Rbtn" onclick="show(1,2,5,6)"> Items 1,2,5,6 <br>
<input type="radio" name="Rbtn" onclick="show(2,3,4,5,6)"> Items 2,3,4,5,6 <br>
<input type="radio" name="Rbtn" onclick="show(1,2,6,12)"> Items 1,2,6,12 <br>
<input type="radio" name="Rbtn" onclick="show(1,2,3,4,5,6,11)"> Items 1,2,3,4,5,6,11 <br>
<p>
<div id="selectBoxes">
<select id="SB0">  <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
<select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
<select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
<select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
<select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
<select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
<select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
<select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
<select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
<select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
<select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
<select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
</div>

<script type="text/javascript">
function show() {
  var sbox = '';
  var sel = document.getElementById('selectBoxes').getElementsByTagName('select');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  for (var i=0; i<arguments.length; i++) {
    sbox = Number(arguments[i])-1;
    document.getElementById('SB'+sbox).style.display = 'block';
  }
}
</script>

</body>
</html>

Good Luck!

pc_mac

thank you so much for this I will try this later this afternoon!

I am really sorry I was meant to say radio boxes!!!! (Yesterday was a very long day!)
Can't believe I typed out a whole question saying check boxes instead of radio button! (you can only select one at a time - so yes definitely radio button and not checkbox! - sorry about that!)

Thanks again I will report back!!

JMRKER;1316621 wrote:
Yes, you can use checkboxes, but it is much cleaner to use radio buttons.
Modify this to your heart's content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style type="text/css">
 select { display:none; }
</style>

<title> Untitled </title>

</head>
<body>
<input type="radio" name="Rbtn" onclick="show(1,2,5,6)"> Items 1,2,5,6 <br>
<input type="radio" name="Rbtn" onclick="show(2,3,4,5,6)"> Items 2,3,4,5,6 <br>
<input type="radio" name="Rbtn" onclick="show(1,2,6,12)"> Items 1,2,6,12 <br>
<input type="radio" name="Rbtn" onclick="show(1,2,3,4,5,6,11)"> Items 1,2,3,4,5,6,11 <br>
<p>
<div id="selectBoxes">
<select id="SB0">  <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
<select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
<select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
<select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
<select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
<select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
<select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
<select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
<select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
<select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
<select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
<select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
</div>

<script type="text/javascript">
function show() {
  var sbox = '';
  var sel = document.getElementById('selectBoxes').getElementsByTagName('select');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  for (var i=0; i<arguments.length; i++) {
    sbox = Number(arguments[i])-1;
    document.getElementById('SB'+sbox).style.display = 'block';
  }
}
</script>

</body>
</html>
Good Luck!

pc_mac

This code has worked great!!! thank you so much.

I have another question if you can help me further please?

After the form is submitted how can I keep those selected drop menu options visible?

Thanks again : )

JMRKER;1316621 wrote:
Yes, you can use checkboxes, but it is much cleaner to use radio buttons.
Modify this to your heart's content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style type="text/css">
 select { display:none; }
</style>

<title> Untitled </title>

</head>
<body>
<input type="radio" name="Rbtn" onclick="show(1,2,5,6)"> Items 1,2,5,6 <br>
<input type="radio" name="Rbtn" onclick="show(2,3,4,5,6)"> Items 2,3,4,5,6 <br>
<input type="radio" name="Rbtn" onclick="show(1,2,6,12)"> Items 1,2,6,12 <br>
<input type="radio" name="Rbtn" onclick="show(1,2,3,4,5,6,11)"> Items 1,2,3,4,5,6,11 <br>
<p>
<div id="selectBoxes">
<select id="SB0">  <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
<select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
<select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
<select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
<select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
<select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
<select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
<select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
<select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
<select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
<select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
<select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
</div>

<script type="text/javascript">
function show() {
  var sbox = '';
  var sel = document.getElementById('selectBoxes').getElementsByTagName('select');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  for (var i=0; i<arguments.length; i++) {
    sbox = Number(arguments[i])-1;
    document.getElementById('SB'+sbox).style.display = 'block';
  }
}
</script>

</body>
</html>
Good Luck!

Padonak

you can do it, for example, this way

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Untitled </title>
<style type="text/css">
select {display:none;margin-top:5px;margin-bottom:5px;}
</style>
<script>
var args=['1,2,5,6','2,3,4,5,6','1,2,6,12','1,2,3,4,5,6,11'];
function $(id){return document.getElementById(id);}

window.onload=function(){
var i=0,
    loc=location.search.substr(1);
while($('r'+i)!==null){
$('r'+i).onclick=function(){
var index=$('predef').value=this.id.substr(1),
    arr=args[index].split(','),
    sbox='',
    sel=$('selectBoxes').getElementsByTagName('select');
for(var k=0; k<sel.length; k++){sel[k].style.display='none';}
for(var s=0; s<arr.length; s++){
var sbox=Number(arr[s])-1;
$('SB'+sbox).style.display='block';
}
}
i++;
}

$('frm').onreset=function(){$('predef').value='';}
var preval=loc.split('&')[0].split('=')[1];
if($('r'+preval)!==null){$('r'+preval).click();}
}
</script>
</head>
<body>
<form name="frm" id="frm" action="">
<input type="hidden" name="predef" id="predef" value="" />
<input type="radio" name="Rbtn" id="r0" /> Items 1,2,5,6 <br />
<input type="radio" name="Rbtn" id="r1" /> Items 2,3,4,5,6 <br />
<input type="radio" name="Rbtn" id="r2" /> Items 1,2,6,12 <br />
<input type="radio" name="Rbtn" id="r3" /> Items 1,2,3,4,5,6,11 <br />
<p>
<div id="selectBoxes">
<select id="SB0">  <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
<select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
<select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
<select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
<select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
<select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
<select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
<select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
<select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
<select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
<select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
<select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
</div>
<div><input type="submit" value="Submit" />&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset" /></div>
</form>
</body>
</html>

JMRKER

pc_mac;1316797 wrote:
This code has worked great!!! thank you so much.

I have another question if you can help me further please?

After the form is submitted how can I keep those selected drop menu options visible?

Thanks again : )

I think you would need to save the selections to a cookie or, if using HTML-5, perhaps local storage.
I'm not sure the page retains the information after the submit occurs.

Save current selection and set that option when page is reloaded.

pc_mac

JMRKER;1316907 wrote:
I think you would need to save the selections to a cookie or, if using HTML-5, perhaps local storage.
I'm not sure the page retains the information after the submit occurs.

Save current selection and set that option when page is reloaded.

I have used php to make sure the checkbox remains selected after the form is submitted.

Is there a way to run the function if a checkbox is checked rather than only on 'onclick'

Thank you so much once again!

JMRKER

pc_mac;1316981 wrote:
I have used php to make sure the checkbox remains selected after the form is submitted.

Is there a way to run the function if a checkbox is checked rather than only on 'onclick'

Thank you so much once again!

Yes, but then you are back to your original checkbox request
that we suggested you change to radio buttons.

We're starting to go around in circles. :eek:

What is it that you are REALLY trying to do?
What do you want to use other than onclick? Clap-on, Clap-off?

Kevin2

JMRKER;1316985 wrote:
What do you want to use other than onclick? Clap-on, Clap-off?

The Clap-on/Clap-off JavaScript events only work during the Christmas shopping season.

pc_mac;1316981 wrote:
Is there a way to run the function if a checkbox is checked rather than only on 'onclick'

While you've been told that radio buttons are the real solution to your original issue, this is one way to deal with checkboxes:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>check to see if a checkbox is checked or (un)checked to be redundantly redundant</title>
<script>
	function cheese(el){
	   if (el.checked == true){
		alert("I like cheese");
	   }else{
		alert("I hate cheese");
	   }
	}
</script>
<body>
<form action="">
	<input type="checkbox" id="mycheckbox"> I like cheese<br>
	<button onclick="cheese(mycheckbox)">Submit</button>
</form>
</body>
</html>

You can also check for unchecked by using "checked == false". More redundancy .

JMRKER

If you REALLY need a checkbox to ACT like a radio button, consider this,
but I still don't understand the purpose.

<html>
<meta charset="UTF-8">
<head>
<title>Radio-Box  Test</title>
</head>
<body>
<h1>CBox Test</h1>
<p />
<input type="checkbox" name="CB" value='1'>One
<input type="checkbox" name="CB" value='2'>Two
<input type="checkbox" name="CB" value='3'>Three
<input type="checkbox" name="CB" value='4'>Four
<input type="checkbox" name="CB" value='5'>Five
<br> <input id="Results" type="text" value="">Results

<script type="text/javascript">
function rBtnActions(info) {
  var sel = document.getElementsByTagName('input');
  for (var i=0; i<sel.length; i++) {
    if (sel[i].value == info.value) { } else { sel[i].checked = false; }
  }
  var str = '';   if (info.checked) { str = info.value; }
  return str;
}

window.onload = function() {
  var sel = document.getElementsByTagName('input');
  for (var i=0; i<sel.length; i++) {
    sel[i].onclick = function() {  document.getElementById('Results').value = rBtnActions(this) };
  }
}
</script>

</body>
</html>

Error404

pc_mac;1316981 wrote:
I have used php to make sure the checkbox remains selected after the form is submitted.

Is there a way to run the function if a checkbox is checked rather than only on 'onclick'

Thank you so much once again!

Did you mean to write radio buttons or do you actually want a checkbox?

I'm not sure what you're asking in your second line, onClick does just that. Are you saying to run a function to check whether a particular button is already selected when the page loads? Unless you're forcing the button or box to be checked, it'll be refreshed by the browser when the page loads. If you're storing the result in a cookie or session, then empty it and un-check the box or button.

JMRKER;1316985 wrote:
What do you want to use other than onclick? Clap-on, Clap-off?

pc_mac

JMRKER;1316985 wrote:
Yes, but then you are back to your original checkbox request
that we suggested you change to radio buttons.

We're starting to go around in circles. :eek:

What is it that you are REALLY trying to do?
What do you want to use other than onclick? Clap-on, Clap-off?

sorry everyone wow this is embarrassing - apologies once again; I don't know when I've caught this habit of typing without thinking...

I do not mean checkbox - I mean radio button.

Thanks so much JMRKER for helping me with the first part of the question. Padonak has kindly helped me with the 2nd part of the question and is working great!!

Thank you for your time, patience and help I really appreciate it!

pc_mac

Padonak;1316887 wrote:

you can do it, for example, this way

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Untitled </title>
<style type="text/css">
select {display:none;margin-top:5px;margin-bottom:5px;}
</style>
<script>
var args=['1,2,5,6','2,3,4,5,6','1,2,6,12','1,2,3,4,5,6,11'];
function $(id){return document.getElementById(id);}

window.onload=function(){
var i=0,
    loc=location.search.substr(1);
while($('r'+i)!==null){
$('r'+i).onclick=function(){
var index=$('predef').value=this.id.substr(1),
    arr=args[index].split(','),
    sbox='',
    sel=$('selectBoxes').getElementsByTagName('select');
for(var k=0; k<sel.length; k++){sel[k].style.display='none';}
for(var s=0; s<arr.length; s++){
var sbox=Number(arr[s])-1;
$('SB'+sbox).style.display='block';
}
}
i++;
}

$('frm').onreset=function(){$('predef').value='';}
var preval=loc.split('&')[0].split('=')[1];
if($('r'+preval)!==null){$('r'+preval).click();}
}
</script>
</head>
<body>
<form name="frm" id="frm" action="">
<input type="hidden" name="predef" id="predef" value="" />
<input type="radio" name="Rbtn" id="r0" /> Items 1,2,5,6 <br />
<input type="radio" name="Rbtn" id="r1" /> Items 2,3,4,5,6 <br />
<input type="radio" name="Rbtn" id="r2" /> Items 1,2,6,12 <br />
<input type="radio" name="Rbtn" id="r3" /> Items 1,2,3,4,5,6,11 <br />
<p>
<div id="selectBoxes">
<select id="SB0">  <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
<select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
<select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
<select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
<select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
<select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
<select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
<select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
<select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
<select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
<select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
<select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
</div>
<div><input type="submit" value="Submit" />***<input type="reset" value="Reset" /></div>
</form>
</body>
</html>

Many thanks Padonak!! Really thank you so much!

pc_mac

Padonak;1316887 wrote:

you can do it, for example, this way

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Untitled </title>
<style type="text/css">
select {display:none;margin-top:5px;margin-bottom:5px;}
</style>
<script>
var args=['1,2,5,6','2,3,4,5,6','1,2,6,12','1,2,3,4,5,6,11'];
function $(id){return document.getElementById(id);}

window.onload=function(){
var i=0,
    loc=location.search.substr(1);
while($('r'+i)!==null){
$('r'+i).onclick=function(){
var index=$('predef').value=this.id.substr(1),
    arr=args[index].split(','),
    sbox='',
    sel=$('selectBoxes').getElementsByTagName('select');
for(var k=0; k<sel.length; k++){sel[k].style.display='none';}
for(var s=0; s<arr.length; s++){
var sbox=Number(arr[s])-1;
$('SB'+sbox).style.display='block';
}
}
i++;
}

$('frm').onreset=function(){$('predef').value='';}
var preval=loc.split('&')[0].split('=')[1];
if($('r'+preval)!==null){$('r'+preval).click();}
}
</script>
</head>
<body>
<form name="frm" id="frm" action="">
<input type="hidden" name="predef" id="predef" value="" />
<input type="radio" name="Rbtn" id="r0" /> Items 1,2,5,6 <br />
<input type="radio" name="Rbtn" id="r1" /> Items 2,3,4,5,6 <br />
<input type="radio" name="Rbtn" id="r2" /> Items 1,2,6,12 <br />
<input type="radio" name="Rbtn" id="r3" /> Items 1,2,3,4,5,6,11 <br />
<p>
<div id="selectBoxes">
<select id="SB0">  <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
<select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
<select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
<select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
<select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
<select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
<select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
<select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
<select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
<select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
<select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
<select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
</div>
<div><input type="submit" value="Submit" />&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset" /></div>
</form>
</body>
</html>

Hi again Padonak

The idea works great - but my actual form doesn't work now and no results are retrieved. I think this is due the fact that the options appear in the url...

Is there an alternative?

I have used PHP to keep the radio button checked after the form is submitted.

<?php if(isset($POST['selection1']) && $POST['selection1'] == 'selection 1') echo ' checked="checked"';?>
Is there a way this way?

Thanks for you help again.

Padonak

it was not clear from your questions that you were using the post method in the form or i missed it. the same code with method="post":

index.php

<?php
header("Cache-Control: no-store");
header("Expires: " . date("r"));
header("Cache-Control: max-age=0");
header("Cache-Control: no-cache");
header("Expires: 0");
header("Expires: Tue, 01 Jan 1970 1:00:00 GMT");
header("Pragma: no-cache");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Untitled </title>
<style type="text/css">
select {display:none;margin-top:5px;margin-bottom:5px;}
</style>
<script>
var args=['1,2,5,6','2,3,4,5,6','1,2,6,12','1,2,3,4,5,6,11'];
function $(id){return document.getElementById(id);}

window.onload=function(){
var i=0,
    loc=location.search.substr(1);
while($('r'+i)!==null){
$('r'+i).onclick=function(){
var index=$('predef').value=this.id.substr(1),
    arr=args[index].split(','),
    sel=$('selectBoxes').getElementsByTagName('select');
for(var k=0; k<sel.length; k++){sel[k].style.display='none';}
for(var s=0; s<arr.length; s++){
var sbox=Number(arr[s])-1;
$('SB'+sbox).style.display='block';
}
}
i++;
}

$('frm').onreset=function(){$('predef').value='';}
//var preval=loc.split('&')[0].split('=')[1];
//if($('r'+preval)!==null){$('r'+preval).click();}
<?php
if(isset($_POST['predef'])){
echo '$("r'.$_POST['predef'].'").click();
';
}
?>
}
</script>
</head>
<body>
<form name="frm" id="frm" action="" method="post">
<input type="hidden" name="predef" id="predef" />
<input type="radio" name="Rbtn" id="r0" /> Items 1,2,5,6 <br />
<input type="radio" name="Rbtn" id="r1" /> Items 2,3,4,5,6 <br />
<input type="radio" name="Rbtn" id="r2" /> Items 1,2,6,12 <br />
<input type="radio" name="Rbtn" id="r3" /> Items 1,2,3,4,5,6,11 <br />
<p>
<div id="selectBoxes">
<select id="SB0">  <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
<select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
<select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
<select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
<select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
<select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
<select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
<select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
<select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
<select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
<select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
<select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
</div>
<div><input type="submit" value="Submit" />&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset" /></div>
</form>
</body>
</html>

Padonak

this php condition works better

<?php
header("Cache-Control: no-store");
header("Expires: " . date("r"));
header("Cache-Control: max-age=0");
header("Cache-Control: no-cache");
header("Expires: 0");
header("Expires: Tue, 01 Jan 1970 1:00:00 GMT");
header("Pragma: no-cache");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Untitled </title>
<style type="text/css">
select {display:none;margin-top:5px;margin-bottom:5px;}
</style>
<script>
var args=['1,2,5,6','2,3,4,5,6','1,2,6,12','1,2,3,4,5,6,11'];
function $(id){return document.getElementById(id);}

window.onload=function(){
var i=0,
    loc=location.search.substr(1);
while($('r'+i)!==null){
$('r'+i).onclick=function(){
var index=$('predef').value=this.id.substr(1),
    arr=args[index].split(','),
    sel=$('selectBoxes').getElementsByTagName('select');
for(var k=0; k<sel.length; k++){sel[k].style.display='none';}
for(var s=0; s<arr.length; s++){
var sbox=Number(arr[s])-1;
$('SB'+sbox).style.display='block';
}
}
i++;
}

$('frm').onreset=function(){$('predef').value='';}
//var preval=loc.split('&')[0].split('=')[1];
//if($('r'+preval)!==null){$('r'+preval).click();}
<?php
if(!empty($_POST['predef'])||$_POST['predef']==='0'){
echo '$("r'.$_POST['predef'].'").click();
';
}
?>
}
</script>
</head>
<body>
<form name="frm" id="frm" action="" method="post">
<input type="hidden" name="predef" id="predef" />
<input type="radio" name="Rbtn" id="r0" /> Items 1,2,5,6 <br />
<input type="radio" name="Rbtn" id="r1" /> Items 2,3,4,5,6 <br />
<input type="radio" name="Rbtn" id="r2" /> Items 1,2,6,12 <br />
<input type="radio" name="Rbtn" id="r3" /> Items 1,2,3,4,5,6,11 <br />
<p>
<div id="selectBoxes">
<select id="SB0">  <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
<select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
<select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
<select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
<select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
<select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
<select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
<select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
<select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
<select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
<select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
<select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
</div>
<div><input type="submit" value="Submit" />&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset" /></div>
</form>
</body>
</html>

Padonak

updated lightly changed code

<?php
header("Cache-Control: no-store");
header("Expires: " . date("r"));
header("Cache-Control: max-age=0");
header("Cache-Control: no-cache");
header("Expires: 0");
header("Expires: Tue, 01 Jan 1970 1:00:00 GMT");
header("Pragma: no-cache");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Untitled </title>
<style type="text/css">
input{cursor:pointer;}
#result{position:absolute;top:10px;right:10px;padding:20px;border:2px solid #ccc;border-radius:10px;color:#000;background-color:#f2f5da;}
select {display:none;margin-top:5px;margin-bottom:5px;}
</style>
<script>
var args=['1,2,5,6','2,3,4,5,6','1,2,6,12','1,2,3,4,5,6,11'];
function $(id){return document.getElementById(id);}

window.onload=function(){
var i=0,
    sel=$('selectBoxes').getElementsByTagName('select');

for(var n=0; n<sel.length; n++){
var opts=sel[n].options;
/*
adding the "value" attribute to every option element
according to its "text" value
*/
for(var z=0; z<opts.length; z++){
opts[z].value=opts[z].text;
}
/*
adding the first option with empty value 
to every select element
and focusing on this option
*/
sel[n].options[0]=new Option('select','');
sel[n].selectedIndex=0;
/*
adding the "name" attribute to every select element
according to its "id" attribute value
*/
sel[n].name=sel[n].id;
}

while($('r'+i)!==null){
$('r'+i).onclick=function(){
var index=$('predef').value=this.id.substr(1),
    arr=args[index].split(',');
for(var k=0; k<sel.length; k++){sel[k].style.display='none';}
for(var s=0; s<arr.length; s++){
var sbox=Number(arr[s])-1;
$('SB'+sbox).style.display='block';
}
}
i++;
}

$('frm').onreset=function(){
$('predef').value='';
try{document.body.removeChild($('result'));}
catch(e){}
}
<?php
if(!empty($_POST['predef'])||$_POST['predef']==='0'){
echo '$("r'.$_POST['predef'].'").click();
';
}
?>
}
</script>
</head>
<body>
<form name="frm" id="frm" action="" method="post">
<input type="hidden" name="predef" id="predef" value="" />
<input type="radio" name="Rbtn" id="r0" /> Items 1,2,5,6 <br />
<input type="radio" name="Rbtn" id="r1" /> Items 2,3,4,5,6 <br />
<input type="radio" name="Rbtn" id="r2" /> Items 1,2,6,12 <br />
<input type="radio" name="Rbtn" id="r3" /> Items 1,2,3,4,5,6,11 <br />
<p>
<div id="selectBoxes">
<select id="SB0">  <option>SB00</option> <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
<select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
<select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
<select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
<select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
<select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
<select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
<select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
<select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
<select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
<select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
<select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
</div>
<div><input type="submit" value="Submit" />&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset" /></div>
</form>
<?php
if(count($_POST)!==0&&$_POST['predef']!==''){
$output='<center><h2>The following <span style="color:Crimson">$_POST</span> values has just been recieved:</h2><br />';
foreach($_POST as $key => $val){
$output.='<i>'.$key.'</i> = <b>'.( ($val!=='')?$val:'<span style="color:#ccc">this element has not been changed/selected</span>' ).'</b><br />';
}
echo '<div id="result">'.$output.'</center></div>';
}
?>
</body>
</html>

and live demo

pc_mac

Padonak;1317317 wrote:

updated lightly changed code

<?php
header("Cache-Control: no-store");
header("Expires: " . date("r"));
header("Cache-Control: max-age=0");
header("Cache-Control: no-cache");
header("Expires: 0");
header("Expires: Tue, 01 Jan 1970 1:00:00 GMT");
header("Pragma: no-cache");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Untitled </title>
<style type="text/css">
input{cursor:pointer;}
#result{position:absolute;top:10px;right:10px;padding:20px;border:2px solid #ccc;border-radius:10px;color:#000;background-color:#f2f5da;}
select {display:none;margin-top:5px;margin-bottom:5px;}
</style>
<script>
var args=['1,2,5,6','2,3,4,5,6','1,2,6,12','1,2,3,4,5,6,11'];
function $(id){return document.getElementById(id);}

window.onload=function(){
var i=0,
    sel=$('selectBoxes').getElementsByTagName('select');

for(var n=0; n<sel.length; n++){
var opts=sel[n].options;
/*
adding the "value" attribute to every option element
according to its "text" value
*/
for(var z=0; z<opts.length; z++){
opts[z].value=opts[z].text;
}
/*
adding the first option with empty value 
to every select element
and focusing on this option
*/
sel[n].options[0]=new Option('select','');
sel[n].selectedIndex=0;
/*
adding the "name" attribute to every select element
according to its "id" attribute value
*/
sel[n].name=sel[n].id;
}

while($('r'+i)!==null){
$('r'+i).onclick=function(){
var index=$('predef').value=this.id.substr(1),
    arr=args[index].split(',');
for(var k=0; k<sel.length; k++){sel[k].style.display='none';}
for(var s=0; s<arr.length; s++){
var sbox=Number(arr[s])-1;
$('SB'+sbox).style.display='block';
}
}
i++;
}

$('frm').onreset=function(){
$('predef').value='';
try{document.body.removeChild($('result'));}
catch(e){}
}
<?php
if(!empty($_POST['predef'])||$_POST['predef']==='0'){
echo '$("r'.$_POST['predef'].'").click();
';
}
?>
}
</script>
</head>
<body>
<form name="frm" id="frm" action="" method="post">
<input type="hidden" name="predef" id="predef" value="" />
<input type="radio" name="Rbtn" id="r0" /> Items 1,2,5,6 <br />
<input type="radio" name="Rbtn" id="r1" /> Items 2,3,4,5,6 <br />
<input type="radio" name="Rbtn" id="r2" /> Items 1,2,6,12 <br />
<input type="radio" name="Rbtn" id="r3" /> Items 1,2,3,4,5,6,11 <br />
<p>
<div id="selectBoxes">
<select id="SB0">  <option>SB00</option> <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
<select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
<select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
<select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
<select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
<select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
<select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
<select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
<select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
<select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
<select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
<select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
</div>
<div><input type="submit" value="Submit" />&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset" /></div>
</form>
<?php
if(count($_POST)!==0&&$_POST['predef']!==''){
$output='<center><h2>The following <span style="color:Crimson">$_POST</span> values has just been recieved:</h2><br />';
foreach($_POST as $key => $val){
$output.='<i>'.$key.'</i> = <b>'.( ($val!=='')?$val:'<span style="color:#ccc">this element has not been changed/selected</span>' ).'</b><br />';
}
echo '<div id="result">'.$output.'</center></div>';
}
?>
</body>
</html>

and live demo

Wow many thanks Padonak!!!

Padonak

you're welcome, greetings from Russia )