2

我正在使用Mika Tuupola Chained Selects jQuery 插件为我的网站构建一个链式选择/下拉列表。

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

类别：

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

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

感谢您对此的所有帮助！

4

1 回答 1

0 
<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(){...});是在下载包括图像在内的所有内容并且页面已完全加载后触发的事件。

于 2012-07-26T04:12:08.470 回答