Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var tool;
var version;
$(document).ready(function(){
      $('select#tool').selectmenu({
        style:'popup',
        // use select callback
        select: function(event, options) {
           tool = options.value;
          if (tool == "cgs") { 
            $('select#'+tool).parent("fieldset").show();    //This shows the version selectbox
             $("#cgs").change(function(){
               version = $(this).val();
	//Write version specific data to screen
               document.getElementById("val_scenarios").innerHTML=(tool + " - " + version);
             });
          } else if (tool == "dpss"){
             $("#cgs").change(function(){
               version = $(this).val();
	//Write version specific data to screen
               document.getElementById("val_scenarios").innerHTML=(tool + " - " + version);	
          } else if (tool == "elt5500"){
            //$("#elt5500").change(function(){ … })
          } else if (tool == "iapioneer"){  
            //$("# iapioneer ").change(function(){ … })
          } else {
            $('select#none').parent("fieldset").hide();
          }        
        }
      });
       
      //var tool is not global.  This statement only works when page is loaded and value for ‘tool’ is hard-coded
      //Whatever tool is listed here is the tool version that shows 
      $('select#'+tool).selectmenu({maxHeight: 150}).parent("fieldset").hide();
      
    });

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<DIV id="tb" class="qualifier">
    <form id="info" action="">
      <fieldset>
      <select name='tool' id='tool'>
          <option value="none" selected>Select a tool...</option>
          <option value="cgs" >CGS/GXP</option> 
          <option value="dpss">DPSS</option> 
          <option value="elt5500">ELT5500</option> 
          <option value="iapioneer">IAPioneer</option>
      </select>
      </fieldset>
      
      <fieldset>
       <select id="cgs" name='cgs'> 
          <option value="none" selected>Select a version...</option>
          <option value="cgs_1.0"> CGS 1.0/GXP</option>
          <option value="cgs_2.0"> CGS 2.0/GXP 2.1.2</option>
        </select> 
       </fieldset>
       
       <fieldset> 
         <select id="dpss" name='dpss'>
          <option value="none" selected>Select a version...</option>
          <option value="dpss_2.0">DPSS 2.0</option>
          <option value="dpss_2.0.7.29">DPSS 2.0.7.29</option>
        </select>           
        </fieldset>
        
        <fieldset>
         <select id="elt5500" name='elt5500'>
          <option value="none" selected>Select a version...</option>
          <option value="elt5500_4.0">ELT5500 PRO 4.0/CGS 2.1</option>
          <option value="elt5500_4.1">ELT5500 PRO 4.1/CGS 2.1</option>
        </select> 
       </fieldset>  
       
       <fieldset>
         <select id="iapioneer" name='iapioneer'>
          <option value="none" selected>Select a version...</option>
          <option value="iapioneer_2.1">IAPioneer/CGS 2.3.1</option>
        </select> 
       </fieldset>

    </form>
</div>
    <br />
    <div id="val_scenarios"></div>