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

Question

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

HTML＆amp; PHP :(从数据库加载SELECT选项）

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

Javascript（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);
  });
});

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

JSFIFDDLE EXAMPLE

感谢您的帮助:)

Answer 1

如评论中所述，您使用的是JQuery版本 1.6.2 ，并且在您的脚本中，JQuery中添加了.on() 1.7。版本。更新您的JQuery版本（＆gt; 1.7 ），它将有效。

Answer 2

案例A： 使用＆＃34; bind＆＃34;而不是＆＃34; on＆＃34;如果您使用jQuery 1.6.4或更低版本。 http://jsfiddle.net/yt0dekfy/6/

$("#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);
});

案例B： 只需使用＆＃34;更改＆＃34;而不是＆＃34; on＆＃34;。 http://jsfiddle.net/yt0dekfy/7/

$("#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);
});

案例C： 如果你想使用＆＃34; on＆＃34;更新到更高版本的jQuery（> 1.7）。选择 http://jsfiddle.net/yt0dekfy/8/

$("#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);
});

Answer 3

$("#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");
});

jsfiddle