2

Mika Tuupola Chained Selects jQueryプラグインを使用して、Webサイトの連鎖選択/ドロップダウンを構築しています。

次のような2つのデータベースカテゴリとサブカテゴリからオプションを動的に取得しています。

カテゴリ：

<?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")することは、将来存在することになる何かを参照することです。したがって、コードは失敗します。

このために存在した1つの解決策は、要素にアクセスするすべてのそのような操作をHTMLの要素の後に実行することです。したがって、本文を閉じる前にそのようなスクリプトをファイルの終わりに移動すると役立ちます。

ただし、現在より優れたソリューションがあるため、これはお勧めしません。最近のほとんどのブラウザーは、すべてがダウンロードされ、解析され、DOMの準備が整うとトリガーされるDOMreadyイベントをサポートしています。$(document).ready(function(){..});は、jQueryによるこのDOMradyイベントのクロスブラウザー実装です。

以下はDocument.readyのバリアントですが、同じことを行います。

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

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

$(function () {
});     

jQuery(function ($) {
});

簡単に言うと、内部にコードを記述$(document).ready(function(){..});することで、すべてのダウンロードが完了し、コードの実行時にDOMの準備が整います。

注：すべてがダウンロードされていると言うとき、DOMの準備に必要のない画像やその他のデータは対象外です。window.load(function(){...});画像を含むすべてがダウンロードされ、ページが完全に読み込まれるとトリガーされるイベントです。

于 2012-07-26T04:12:08.470 に答える