Javascript 当我从另一个列表中选择时，选项列表未加载

我有两个选择菜单，第一个是我想从中选择的类别，另一个是我从另一个菜单中选择的类别的optgroup，当我从第一个菜单中选择时，我希望第二个菜单加载与我选择的类别相关的optgroup，但它没有

HTML&PHP：选择选项是从数据库加载的

<select name="workout" id="exc">
<optgroup label="Legs">
<?php
$sql = "SELECT excercise FROM legs";
$res = mysql_query($sql) or die (mysql_error());
while ($row = mysql_fetch_assoc($res)) {
        echo "<option value='".$row['excercise']."'>".$row['excercise']."</option>";
    }
?>
</optgroup>

<optgroup label="Biceps">
<?php
$sql = "SELECT excercise FROM biceps";
$res = mysql_query($sql) or die (mysql_error());
while ($row = mysql_fetch_assoc($res)) {
        echo "<option value='".$row['excercise']."'>".$row['excercise']."</option>";
    }
?>
</optgroup>

</select>

任何人都可以告诉我为什么它没有按预期工作？？ 我需要实现的示例如下：

感谢您的帮助：

---

正如在评论中所说的，您使用的是JQuery 1.6.2版，在您的脚本中添加了JQuery 1.7。版本更新您的JQuery>1.7版本，它就会工作。

案例A： 如果使用jQuery 1.6.4或更低版本，请使用bind而不是on。

案例B： 简单地使用change而不是on。

案例C： 如果要使用on选择器，请更新到jQuery>1.7的更高版本

---

在jsfiddler中，它可以工作。它到底出了什么问题？每个肌肉群都有一张单独的桌子？这是否明智？在这些情况下，通常使用的机制是像以前一样从PHP加载第一个下拉列表，但要加载运行ajax调用的第二个下拉列表，请将下拉列表1的值传递给它，然后从ajax调用的结果加载第二个下拉列表。是否会引发错误？如果它可以在演示中使用，但不能在您的页面上使用，那么会有所不同。您是否在该页面的HTML中包含了JQuery库？

$(document).ready(function() {
  $("#filter").on("change", function() {
    $exc = $("#exc");
    $exc.find("optgroup").hide().children().hide();
    $exc.find("optgroup[label='" + this.value + "']").show().children().show();
    $exc.find("optgroup[label='" + this.value + "'] option").eq(0).prop("selected", true);
  });
});

$("#filter").bind("change",function() {
    $exc = $("#exc");
    $exc.find("optgroup").hide().children().hide();
    $exc.find("optgroup[label='" + this.value + "']").show().children().show();
    $exc.find("optgroup[label='" + this.value + "'] option").eq(0).prop("selected", true);
});

$("#filter").change(function() {
    $exc = $("#exc");
    $exc.find("optgroup").hide().children().hide();
    $exc.find("optgroup[label='" + this.value + "']").show().children().show();
    $exc.find("optgroup[label='" + this.value + "'] option").eq(0).prop("selected", true);
});

$("#filter").on("change",function() {
    $exc = $("#exc");
    $exc.find("optgroup").hide().children().hide();
    $exc.find("optgroup[label='" + this.value + "']").show().children().show();
    $exc.find("optgroup[label='" + this.value + "'] option").eq(0).prop("selected", true);
});

$("#filter").on("change excReady", function() {
$exc = $("#exc");
$exc.find("optgroup").hide().children().hide();
$exc.find("optgroup[label='" + this.value + "']").show().children().show();
$exc.find("optgroup[label='" + this.value + "'] option").eq(0).prop("selected", true);
});
$("#exc").ready(function(){
    $("#filter").trigger("excReady");
});