HTML表单第一个下拉自动改变第二个下拉选项（续）

I 2小时前问了一个问题，它解决了：Previous Question Solved HTML表单第一个下拉自动改变第二个下拉选项（续）

但现在实现了它在我的代码不能正常工作，如：http://jsfiddle.net/7YeL6/5/

取而代之的是，当我选择“卡车”时，仅出现车辆的下拉菜单，而不是第二个出现颜色的车辆。

，所以我想是我实现它，这里的方式是我的代码，如果有人可以计算出我哪里错了：

HTML页面

<!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">&nbsp;</td> 
     <td width="35%" align="left">&nbsp;</td> 
     </tr> 

     <tr> 
      <td colspan="3" align="left"><hr style="color:#616161"; /></td> 
     </tr> 

     <tr> 
     <td colspan="1" align="left">&nbsp;</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">&nbsp;</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; 

}

来源

2013-03-25 Bruno Carvalho

这对我来说工作得很好。 – Terry 2013-03-25 19:44:29

当我选择“卡车”时，会出现另一个选择列表，并带有黑色和白色选项。对我来说似乎没问题。 – 2013-03-25 19:44:45

您的网站上是否有JS代码的$（document）.ready（）部分，或者您是否粘贴了此代码？ – 2013-03-25 19:46:57

我在代码中看不到包含jQuery库。在subcategory_auto_dropdown.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

那么，你的代码应该是这样的：那么，任何其他script标签之前添加此行

$(document).ready(function(){ 
    //js code you already have 
});

这部分代码开始jQuery代码页时被加载。否则，代码不起作用。

来源

2013-03-25 19:53:04

真棒的家伙。有效！谢谢！！！ – 2013-03-25 19:58:32

HTML表单第一个下拉自动改变第二个下拉选项（续）

回答

相关问题