Old Question - show/hide content by select drop down

Good morning everybody,
i like to hide a div (checkboxgroup) by using java. But all my testing and trying goes to the same end, my form looks like an accident.

Chronoforsm: V4 RC3.0
Joomla! 2.5.8 Stable


One of the workarounds i tried:
http://www.chronoengine.com/forums.html?cont=posts&f=26&t=22017&p=292869&hilit=hide+java#p292869

Thats my HTML how i like to hide if in the DropDown ist the first entry with value 'dose' selected:

<div class="ccms_form_element cfdiv_checkboxgroup" id="ldc_container_div" >
<label for="ldc">Equipment</label>
<input type="hidden" name="ldc" value="" alt="ghost" />
<div style="float:left; clear:none;">
<input type="checkbox" name="ldc[]" id="ldc_0" title="ldc" value="12" class="" />
<label for="ldc_0">12</label>
<input type="checkbox" name="ldc[]" id="ldc_1" title="ldc" value="123" class="" />
<label for="ldc_1">123</label>
<input type="checkbox" name="ldc[]" id="ldc_2" title="ldc" value="1234" class="" />
<label for="ldc_2">1234</label>
<input type="checkbox" name="ldc[]" id="ldc_3" title="ldc" value="12345" class="" />
<label for="ldc_3">12345</label>
</div><div class="clear"></div><div id="error-message-ldc"></div>

Thats the Select Field:

<select size="1" id="location_of_demo" class="cf_inputbox validate-selection" title="location_of_demo" name="location_of_demo" onChange="ldc();" >
<option value="dose">dose 1</option>
<option value="xx">xx</option>
<option value="xxx">xx</option>
<option value="xxxx">xx</option>
<option value="xxxxx">xx</option>
<option value="xxxxxx">xx</option>
</select>

My JavaScript On Load

function ldc(){ 
       if (document.getElementById(location_of_demo).value == 'dose') { 
        document.getElementById(ldc_container_div).style.display = 'none'; 
      } else if 
        (document.getElementById(location_of_demo).value == 'xx') {
        document.getElementById(ldc_container_div).style.display = 'block'; 
      } 
}

I hope some one can help me ....

Thanks

Regards Dave

Thats another solution i follow

function rates(){ 
var i = document.getElementById("location_of_demo1").selectedIndex;
    if (document.getElementById("location_of_demo1").options[i].text == "xx") { 
        document.getElementById("ldc_container_div").style.display = 'none'; 
      } else if 
        (document.getElementById("location_of_demo1").options[i].text == "xxx") {
        document.getElementById("ldc_container_div").style.display = 'block'; 
      } else if 

        (document.getElementById("location_of_demo1").options[i].text == "xxxx") {
        document.getElementById("ldc_container_div").style.display = 'block'; 
      } else if 

        (document.getElementById("location_of_demo1").options[i].text == "xxxxx") {
        document.getElementById("ldc_container_div").style.display = 'block'; 
      } else if 

        (document.getElementById("location_of_demo1").options[i].text == "xxxxxx") {
        document.getElementById("ldc_container_div").style.display = 'block'; 
      } else if 

        (document.getElementById("location_of_demo1").options[i].text == "xxxxxxx") {
        document.getElementById("ldc_container_div").style.display = 'block'; 
      } 
}

now i try to use the selectedIndex integer, but it dosn´t work too.
i get the error "Uncaught TypeError: Cannot read property 'selectedIndex' of null "


I realy hope some one can help

Okay, i was to fast ;-)
I found the mistake.