title: HTML Form first dropdown auto change the second dropdown options (continued)
body: <p>I asked a question 2 hours ago and it was solved: <a href="https://stackoverflow.com/questions/15620283/html-form-first-dropdown-auto-change-the-second-dropdown-options">Previous Question Solved</a></p>
  
  <p>But now that implemented it on my code is not working as in: <a href="http://jsfiddle.net/7YeL6/5/" rel="nofollow noreferrer">http://jsfiddle.net/7YeL6/5/</a></p>
  
  <p>Instead, only the dropdown with the vehicles appears and not the second one with the colors when i select "Trucks" for example.</p>
  
  <p>So i guess is the way i implemented it so here is my code if someone can figure it out where i went wrong:</p>
  
  <p><strong>HTML PAGE</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Add Item&lt;/title&gt;
      &lt;link rel="shortcut icon" href="../style/kk-a.png" type="image/x-icon"&gt;
      &lt;link rel="stylesheet" href="style_copy.css" type="text/css" media="screen" /&gt;
      &lt;link href="style_menu/h_menu_style.css" media="screen" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="style_menu/h_menu_iconic.css" media="screen" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="style_menu/main_color_dropdown.css" media="screen" rel="stylesheet" type="text/css" /&gt;
          &lt;script src="style_menu/h_menu_prefix-free.js"&gt;&lt;/script&gt;
          &lt;script src="subcategory_auto_dropdown.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div align="center" id="mainWrapper"&gt;
    &lt;?php include_once("includes_admin/header_admin_template.php");?&gt;
    &lt;div id="pageContent"&gt;&lt;br /&gt;
      &lt;div align="left" style="margin-left:30px;"&gt;&lt;a href="inventory_list.php"&gt; « Go to Inventory List&lt;/a&gt;&lt;/div&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;div align="left" style="margin-left:24px;"&gt;    
      &lt;form action="inventory_list.php" enctype="multipart/form-data" name="myForm" id="myform" method="post"&gt;
      &lt;table width="100%" border="0" cellspacing="0"&gt;
          &lt;tr&gt;
          &lt;td width="32%" colspan="1" align="left"&gt;&lt;img src="../style/add_item.png" width="200" /&gt;&lt;/td&gt;
          &lt;td width="33%" align="left"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td width="35%" align="left"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
            &lt;td colspan="3" align="left"&gt;&lt;hr style="color:#616161"; /&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
          &lt;td colspan="1" align="left"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td align="left"&gt;&lt;span style="padding-bottom:10px"&gt;Category&lt;/span&gt;&lt;/td&gt;
          &lt;td align="left"&gt;&lt;span style="padding-bottom:10px"&gt;Category 2&lt;/span&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
            &lt;td colspan="1" align="left" style="padding-bottom:10px"&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td align="left" style="padding-bottom:10px"&gt;
                    &lt;select name="category" id="category"&gt;
                        &lt;option selected value="Please Select"&gt;Please Select&lt;/option&gt;           
                        &lt;option value="Cars"&gt;Cars&lt;/option&gt;
                        &lt;option value="Trucks"&gt;Trucks&lt;/option&gt;
                        &lt;option value="Motorcycles"&gt;Motorcycles&lt;/option&gt;
                        &lt;option value="Boats"&gt;Boats&lt;/option&gt;
                     &lt;/select&gt;
            &lt;/td&gt;
            &lt;td align="left" style="padding-bottom:10px"&gt;
                    &lt;select name="category2" id="truck" class="second"&gt;
                        &lt;option value="white"&gt;white&lt;/option&gt;
                        &lt;option value="black"&gt;black&lt;/option&gt;            
                    &lt;/select&gt;
  
                    &lt;select name="category2" id="car" class="second"&gt;
                        &lt;option value="red"&gt;red&lt;/option&gt;
                        &lt;option value="green"&gt;green&lt;/option&gt;
                        &lt;option value="blue"&gt;blue&lt;/option&gt;           
                    &lt;/select&gt;
            &lt;/td&gt;      
          &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td colspan="3" align="left"&gt;&lt;input type="submit" name="button" id="button" value="Submit +ADD"/&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/form&gt;
      &lt;/div&gt;
      &lt;br /&gt;
    &lt;br /&gt;
    &lt;/div&gt;
    &lt;?php include_once("includes_admin/footer_admin_template.php");?&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>subcategory_auto_dropdown.js</strong></p>
  
  <pre><code>$("#category").change(function () {
    var str = "";
  str =  $("select#category option:selected").text();
      if(str == "Trucks"){
          $("select.second").not("#truck").hide();
          $("#truck").show();
          $("#truck").fadeIn(1000);
      }
      else if(str == "Cars"){
          $("select.second").not("#car").hide();
          $("#car").show();
          $("#car").fadeIn(1000);
      }
  
  })
  </code></pre>
  
  <p><strong>style_copy.css</strong></p>
  
  <pre><code>/* SUBCATEGORY DROPDOWN AUTO CHANGE OPTION  */
  #category2{
      display: none;
  }
  .second{
      display: none;
  
  }
  </code></pre>