发布链接选择

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中的元素之后完成的，因此在关闭正文之前将这些脚本移动到文件结尾将有所帮助。

但是这并不是建议的，因为现在你有了更好的解决方案，大多数现代浏览器都支持一旦下载，解析和DOM准备好就触发的DOMready事件。 $ (document).ready(function(){..});是jQuery的这个DOM rady事件的跨浏览器实现。

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

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

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

$(function() { 
});  

jQuery(function ($) { 
}); 

简而言之，编写里面$(document).ready(function(){..});代码是为了确保，一切都已经完成下载和DOM是准备在执行我们的代码的时间。

注意：当我说下载的所有内容时，它并不包含预先准备好DOM的图片和其他数据。 window.load(function(){...});是一旦包括图像在内的所有内容都被下载并且页面已完全加载，则会触发该事件。