How to call/activate the 2nd select list only after 1st select list was selected?

[ragiz]

I have the following select list:SELECT LIST 1:\[code\]<select name="productcolor" id="productcolor" onChange="GetAvailProductSizes();"> <option value=""><? echo $langdata['oneprodpage_selectcolor']; ?>...</option> <? foreach ($thisproduct['availcolors'] as $color) { ?> <option value="http://stackoverflow.com/questions/14409128/<? echo $color['id']; ?>"><? echo $color['name']; ?></option> <? }; ?></select>\[/code\]SELECT LIST 2:\[code\]<select name="productsize" id="productsize" style="width: 120px;"><option value=""><? echo $langdata['oneprodpage_selectsize']; ?>...</option></select>\[/code\]If in LIST 1 no options where selected, LIST 2 will be empty. It's like LIST 2 depends of LIST 1.This is made with this function:\[code\]<script type="text/javascript"><!-- function GetAvailProductSizes() { $('select#productsize option').remove(); $('select#productsize').append('<option value=""><? echo $langdata['oneprodpage_selectsize']; ?>...</option>'); var color = $('#productcolor').val(); if (color > 0) { var availsizes; var http_request = new XMLHttpRequest(); http_request.open( "GET", '<? echo ROOT; ?>/autocompleteavailsizes/?productid=<? echo $thisproduct['id']; ?>&color=' + color, true ); http_request.send(null); http_request.onreadystatechange = function () { if ( http_request.readyState == 4 ) { if ( http_request.status == 200 ) { availsizes = eval( "(" + http_request.responseText + ")" ); for (var i = 0; i < availsizes.length; i++) { $('select#productsize').append('<option value="' + availsizes.id + '">' + availsizes.name + '</option>'); }; } else { alert( "There was a problem with the URL." ); } http_request = null; } }; }; }//--></script>\[/code\]Now, I want the SELECT LIST 2 to be hidden until SELECT LIST 1 was not touched. Any help please with PHP or jQuery. Thank you!