A question was posed by me 2 hours ago which got resolved: Previous Question Solved
However, upon implementing it in my code, I am facing issues as evidenced here: http://jsfiddle.net/7YeL6/5/
The problem arises when only the dropdown with vehicles appears without the second one displaying colors when "Trucks" is selected.
It seems that the implementation might be incorrect. Here's my code for anyone who can help pinpoint where I went wrong:
HTML PAGE
<!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>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Add Item</title>
<link rel="shortcut icon" href="../style/kk-a.png" type="image/x-icon">
<link rel="stylesheet" href="style_copy.css" type="text/css" media="screen" />
<link href="style_menu/h_menu_style.css" media="screen" rel="stylesheet" type="text/css" />
<link href="style_menu/h_menu_iconic.css" media="screen" rel="stylesheet" type="text/css" />
<link href="style_menu/main_color_dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<script src="style_menu/h_menu_prefix-free.js"></script>
<script src="subcategory_auto_dropdown.js"></script>
</head>
<body>
<div align="center" id="mainWrapper">
<?php include_once("includes_admin/header_admin_template.php");?>
<div id="pageContent"><br />
<div align="left" style="margin-left:30px;"><a href="inventory_list.php"> « Go to Inventory List</a></div>
<br />
<br />
<div align="left" style="margin-left:24px;">
<form action="inventory_list.php" enctype="multipart/form-data" name="myForm" id="myform" method="post">
<table width="100%" border="0" cellspacing="0">
<tr>
<td width="32%" colspan="1" align="left"><img src="../style/add_item.png" width="200" /></td>
<td width="33%" align="left"> </td>
<td width="35%" align="left"> </td>
</tr>
<tr>
<td colspan="3" align="left"><hr style="color:#616161"; /></td>
</tr>
<tr>
<td colspan="1" align="left"> </td>
<td align="left"><span style="padding-bottom:10px">Category</span></td>
<td align="left"><span style="padding-bottom:10px">Category 2</span></td>
</tr>
<tr>
<td colspan="1" align="left" style="padding-bottom:10px"> </td>
<td align="left" style="padding-bottom:10px">
<select name="category" id="category">
<option selected value="Please Select">Please Select</option>
<option value="Cars">Cars</option>
<option value="Trucks">Trucks</option>
<option value="Motorcycles">Motorcycles</option>
<option value="Boats">Boats</option>
</select>
</td>
<td align="left" style="padding-bottom:10px">
<select name="category2" id="truck" class="second">
<option value="white">white</option>
<option value="black">black</option>
</select>
<select name="category2" id="car" class="second">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
</td>
</tr>
<tr>
<td colspan="3" align="left"><input type="submit" name="button" id="button" value="Submit +ADD"/></td>
</tr>
</table>
</form>
</div>
<br />
<br />
</div>
<?php include_once("includes_admin/footer_admin_template.php");?>
</div>
</body>
</html>
subcategory_auto_dropdown.js
$("#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);
}
})
style_copy.css
/* SUBCATEGORY DROPDOWN AUTO CHANGE OPTION */
#category2{
display: none;
}
.second{
display: none;
}