JavaScript Forum

**romero83** · 02-09-2010, 08:51 AM

Hi!

I have a select box, which has option tags in optgroups tags.
Plus I have two checkboxes inputs, whiches are hidden in default.

How can be solve that if I click on the select, after the first optgroup, then only just the first checkbox will appear. And if I click on the second optgroup, then the second checkbox will appear.

I made a code snippet, but it works unfortunately just in Mozilla based browsers. Unfortunately Internet Explorer or Chrome do not execute the event which is in the code snippet...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html  xml:lang="hu" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Select, optgroup, option + eseménykezelés</title>
  <meta http-equiv="Content-Type" content="text/html;  charset=iso-8859-2"/>
 </head>
  <body>
   <form action="#" method="post">
    <div>
     <select  class="input" id="select_id" name="select_name">
      <option  selected="selected" value="#">Válasszon</option>
      <optgroup id="kategoria_1" label="Kategória_1"  onmousedown="document.getElementById('checkbox_1').style.display =  'block';">                                    
       <option  value="Kategória_1_elem_1">Kategória_1_elem_1</option>
       <option value="Kategória_1_elem_2">Kategória_1_elem_2</option>
       <option value="Kategória_1_elem_3">Kategória_1_elem_3</option>
      </optgroup>
      <optgroup id="kategoria_2"  label="Kategória_2"  onmousedown="document.getElementById('checkbox_2').style.display =  'block';">                                        
       <option  value="Kategória_2_elem_1">Kategória_2_elem_1</option>
       <option value="Kategória_2_elem_2">Kategória_2_elem_2</option>
       <option value="Kategória_2_elem_3">Kategória_2_elem_3</option>
      </optgroup>
     </select>  
     <input  type="checkbox" id="checkbox_1" name="checkbox_1" value="checkbox_1"  style="display:none;"/>
     <input type="checkbox"  id="checkbox_2" name="checkbox_2" value="checkbox_2"  style="display:none;"/>
   </div>
  </form>
 </body>
</html>

I would like this functionality somehow to be work in popular browsers as well.
(In reality I have approximately 200 options attached to this select.)
Any ideas?
Thank you for your help in advance.

**romero83** · 02-10-2010, 07:55 AM

Ok, I think a few days about the solution and finaly I got it:
It works in every browsers.
Here is the solution:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="hu" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Select, optgroup, option + eseménykezelés</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/>
</head>

<body>
<form action="#" method="post">
<div>
<select class="input" id="select_id" name="select_name"
onchange="if(document.getElementById('select_id').options[this.selectedIndex].id.match('alfa')) {
document.getElementById('checkbox_1').style.display = 'block';
}
if(document.getElementById('select_id').options[this.selectedIndex].id.match('beta')) {
document.getElementById('checkbox_2').style.display = 'block';
}
">
<option selected="selected" value="#">Válasszon</option>
<optgroup id="kategoria_1" label="Kategória_1">
<option id="alfa_0" value="Kategória_1_elem_1">Kategória_1_elem_1</option>
<option id="alfa_1" value="Kategória_1_elem_2">Kategória_1_elem_2</option>
<option id="alfa_2" value="Kategória_1_elem_3">Kategória_1_elem_3</option>
</optgroup>
<optgroup id="kategoria_2" label="Kategória_2">
<option id="beta_0" value="Kategória_2_elem_1">Kategória_2_elem_1</option>
<option id="beta_1" value="Kategória_2_elem_2">Kategória_2_elem_2</option>
<option id="beta_2" value="Kategória_2_elem_3">Kategória_2_elem_3</option>
</optgroup>
</select>

<input type="checkbox" id="checkbox_1" name="checkbox_1" value="checkbox_1" style="display:none;"/>
<input type="checkbox" id="checkbox_2" name="checkbox_2" value="checkbox_2" style="display:none;"/>
</div>
</form>
</body>
</html>