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

链式选择问题

1 个答案: