我正在使用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>
但出于某种原因，它不起作用？为什么会这样？
谢谢你在这方面的帮助！
<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(){...});是在包括图像在内的所有内容都已下载并且页面已完全加载后触发的事件。