What simple step is on this javascript, php, display failure missing? can't figure it out

Question

this is the code:

<?php $countrycode=$p["country"]; ?>
<select size="1" name="countrycode" id="countrycode" onchange="javascript:
    if(this.value=='USA') { 
        document.getElementById('us').style.display='block';
    } else { 
        document.getElementById('us').style.display='none';
    } 
    if(this.value=='DE') {
        document.getElementById('de').style.display='block';
    } else { 
        document.getElementById('de').style.display='none';
    }
">
    <option value="INT" <?php 
        if($countrycode=='INT') { echo 'selected="selected"'; } ?> 
    >International</option>
    <option value="USA" <?php
        if($countrycode=='USA') { echo 'selected="selected"'; } ?> 
    >USA</option>
    <option value="DE" <?php
        if($countrycode=='DE') { echo 'selected="selected"'; } ?> 
    >DE</option>
</select>

This is what I get as result:

When it is the value 'DE' nothing appears below.

When it is the value 'USA' all (even the ones for 'DE') appears. Like this:

Also allow: Canada ¦ United Kingdom ¦ Australia display:none;" id="de"> (>> last part shouldn't be displayed - means display:none;" id="de">)

Also allow: Switzerland Austria (>> this should actually displays on value 'DE')

Would very appreciate a solution that is helping me out.

Answer 1

Here is the missing echo (just forgot)

<?php if($countrycode=='USA') { echo 'display:block;'; } else { echo 'display:none;'; }
 ?>

" id="us">
Also allow:

value="1"> Canada  

<?php
     if($p["UK"]=='1') { echo 'checked="checked"'; } ?>

value="1"> United Kingdom  

<?php 
    if($p["AU"]=='1') { echo 'checked="checked"'; } ?> 

value="1"> Australia

<?php if($countrycode=='DE') { echo 'display:block;'; } else { echo 'display:none;'; } ?>

" id="de">
Also allow:

value="1"> Switzerland  

<?php 
if($p["AT"]=='1') { echo 'checked="checked"'; } ?>

value="1"> Austria

Answer 2

JS Fiddle example of a better way to do this:

http://jsfiddle.net/m55nb59x/1/

HTML:

<select id="countrycode" name="countrycode">
    <option value="INT">International</option>
    <option value="USA">USA</option>
    <option value="DE">DE</option>
</select>
<div id="us">USA div</div>
<div id="de">DE div</div>
<div id="int">INT div</div>

JS:

var selectedCountry = '<? echo $p["country"]; ?>';
//var selectedCountry = 'USA'; // for testing
var divs = $('#us, #de, #int');
var countryCodeSelector = $('#countrycode');
countryCodeSelector.val(selectedCountry);
selectCountry(selectedCountry);
countryCodeSelector
    .change(
        function() {
            var code = $(this).val();
            selectCountry(code);
        }
    )
;
function selectCountry(code){
    var selectedID = '';
    switch(code){
        case 'USA':
            selectedID = 'us';
            break;
        case 'DE':
            selectedID = 'de';
            break;
        case 'INT':
            selectedID = 'int';
            break;
    }
    divs.hide();
    $('#' + selectedID).show();
}

There is further optimization to be done, but this works (like setting up a mapping between Country values, IDs, and titles.