發佈鏈接選擇

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(){...});是一旦包括圖像在內的所有內容都被下載並且頁面已完全加載，則會觸發該事件。