0

2小时前我问了一个问题并解决了：上一个问题已解决

但是现在在我的代码上实现它并不能像这样工作：http: //jsfiddle.net/7YeL6/5/

相反，例如，当我选择“卡车”时，只会出现带有车辆的下拉菜单，而不是带有颜色的第二个下拉菜单。

所以我想这是我实现它的方式，所以如果有人能找出我出错的地方，这是我的代码：

网页

<!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;

}
4

1 回答 1

1

我在您的代码中没有看到包含 jQuery 库。因此，在任何其他script标记之前添加此行：

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

然后，您在subcategory_auto_dropdown.js中的代码应如下所示：

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

这部分代码在页面加载时启动您的 jquery 代码。否则，代码不起作用。

于 2013-03-25T19:53:04.800 回答