php - 链式选择问题

Question

我正在使用 Mika Tuupola Chained Selects jQuery plugin为我的网站构建链式选择/下拉菜单。

我正在动态地从两个数据库类别和子类别中提取选项，如下所示:

类别:

<?php
  $query="SELECT * FROM categories";
  $result = mysql_query ($query);
  echo"<select name='cselect1' id='cat'><option value=''>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['number'])."\">".$catinfo['cat']."</option>";

  }

  echo"</select>";
?>

和子类别

<?php
  $query="SELECT * FROM subcategories";
  $result = mysql_query ($query);
  echo"<select name='sselect1' id='subcat'><option value=''>Sub Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value='".htmlspecialchars($catinfo['subcat'])."' class='".$catinfo['catnumber']."'>".$catinfo['subcat']."</option>";
  }

  echo"</select>";
?>

它回显出这样的东西:

<select id="cat" name="cselect1">
    <option value="0">Please Select A Category</option>
    <option value="1">Restaurants</option>
    <option value="2">Food</option>
    <option value="3">Nightlife</option>
    <option value="4">Shops</option>
</select>

<select id="subcat" name="sselect1">
    <option value="">Sub Category</option>
    <option class="1" value="American">American</option>
    <option class="2" value="Specialty Food">Specialty Food</option>
    <option class="3" value="Bars">Bars</option>
    <option class="4" value="Computers">Computers</option>
</select>

这是我的 jquery:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="../public/scripts/chain.js" type="text/javascript"></script>
<script type="text/javascript">
        $("#subcat").chained("#cat");
</script>

但由于某种原因，它不起作用？为什么是这样？

感谢您对此提供的所有帮助!

Answer 1

<script type="text/javascript">
    $(document).ready(function(){
        $("#subcat").chained("#cat");
    });
</script>

在你的情况下你一直在做:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="../public/scripts/chain.js" type="text/javascript"></script>
<script type="text/javascript">
        $("#subcat").chained("#cat");
</script>

当时$("#subcat").chained("#cat");被称为文档仍在下载并解析为 DOM，还有 jQuery 文件，chain.js 可能尚未下载。

<select id="cat" name="cselect1">并且此时另一个 div 也没有被解析。这样做$("#subcat")指的是将来会存在的东西。所以你的代码失败了。

为此存在的一个解决方案是在 HTML 中的元素之后完成所有此类访问元素的操作，因此在关闭正文之前将此类脚本移动到文件末尾会有所帮助。

但不推荐这样做，因为您现在有更好的解决方案，大多数现代浏览器都支持 DOMready 事件，该事件在所有内容下载、解析并且 DOM 准备就绪后触发。 $ (document).ready(function(){..});是 jQuery 对这个 DOM rady 事件的跨浏览器实现。

以下是 Document.ready 的变体，但做同样的事情。

$(document).ready(function () {
});  

$().ready(function () {
}); 

$(function () {
});     

jQuery(function ($) {
});

简而言之，在$(document).ready(function(){..});里面写代码确保在我们的代码执行时一切都已完成下载并且 DOM 已准备就绪。

注意:当我说所有内容都已下载时，它不包括图像和其他不需要准备 DOM 的数据。 window.load(function(){...});是在包括图像在内的所有内容都已下载并且页面已完全加载后触发的事件。