Question : jquery display hidden elements

Hello experts

I am trying to do the following. After you select an item under #type-shirts, the next menu option (#types-shirt)is suppose to display (it is set to none on the style sheet), but my code is just not working. Can someone please guide me?

thanks in advance.

html:
      <p id="types-shirts">
            <select>
                  <option value="">Select type shirt</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
            </select>
      </p>
      <p id="types-pants"> //this one has a style: display:none
            <select>
                  <option value="">Select type pants</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
            </select>
      </p>

js:
            if ($('#types-shirts').val() != ''){
                  $("#types-pants").css("display","block");
            }

Answer : jquery display hidden elements

Test page :

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:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$("#types-shirts").change(function() {
			$("option[value!='']", "#types-shirts").is(":selected")?$("#types-pants").show():$("#types-pants").hide();
		});
	});
</script>
</head>
<body>
<p id="types-shirts">
            <select>
                  <option value="">Select type shirt</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
            </select>
      </p>
      <p id="types-pants" style="display:none">  //this one has a style: display:none
            <select>
                  <option value="">Select type pants</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
            </select>
      </p>
</body>
</html>