2

ここに私の問題があります:

ddSlick プラグインを使用して、フラグ付きの言語ドロップダウンを実現しています。問題は、このドロップダウンを xml ファイルから動的に作成していることです。すべてがうまくいき、選択は適切に作成されますが、ddSlick プラグインはこれらのオプション フィールドを認識しません。必要なデータ値がすべて揃っていることは 100% 確信しています。

また、オプションを静的な方法で (xml を解析するのではなく、HTML ドキュメントに直接配置するだけで) 配置すると、すべてがうまくいくため、スクリプトの前に ddSlick が実行されているようです (スクリプトの後にチェーンされている場合でも)。これが私のコードです：

xml2html js 関数を実行する前の HTML:

<form>
  <select id='countries' name='countries'>
  </select>
</form>

xml 解析後の HTML:

<form>
  <select id='countries' name='countries'>
    <option data-imagesrc="css/images/flags/Select...jpg" data-description="Select.." value="0">Select..</option>
    <option data-imagesrc="css/images/flags/United States.jpg" data-description="United States" value="1">United States</option>
    <option data-imagesrc="css/images/flags/United Kingdom.jpg" data-description="United Kingdom" value="2">United Kingdom</option>
    <option data-imagesrc="css/images/flags/France.jpg" data-description="France" value="3">France</option>
  </select>
</form>

ddSlick 実行後の HTML:

<form>
  <div id="countries" class="dd-container" style="width: 260px;">
    <div class="dd-select" style="width: 260px; background-color: rgb(238, 238, 238); background-position: initial initial; background-repeat: initial initial;">
      <input class="dd-selected-value" type="hidden">
      <a class="dd-selected"></a><span class="dd-pointer dd-pointer-down"></span>
    </div>
    <ul class="dd-options" style="width: 260px;"></ul>
    <option data-imagesrc="css/images/flags/Select...jpg" data-description="Select.." value="0">Select..</option>
    <option data-imagesrc="css/images/flags/United States.jpg" data-description="United States" value="1">United States</option>
    <option data-imagesrc="css/images/flags/United Kingdom.jpg" data-description="United Kingdom" value="2">United Kingdom</option>
    <option data-imagesrc="css/images/flags/France.jpg" data-description="France" value="3">France</option>
    <option data-imagesrc="css/images/flags/Germany.jpg" data-description="Germany" value="4">Germany</option>
    <option data-imagesrc="css/images/flags/Netherlands.jpg" data-description="Netherlands" value="5">Netherlands</option>
  </div>
</form>

また、ブラウザ コンソールUncaught TypeError: Cannot read property 'imageSrc' of undefinedの 246 行目 (圧縮されていないバージョンの ddSlick プラグイン) にエラーが表示されます。

これらの関数 (xml 解析と ddSlick) を 1 つまたは 2 つの別々の<script></script>ブロックでチェーンとして実行しようとしましたが、成功しませんでした。すべてを適切に説明したことを願っています。助けてください！

4

1 に答える 1

5

説明を受けてコードを再現できますUncaught TypeError。空の選択でプラグインを適用すると発生します（コンソールのフィドルを確認してください）。あなたの問題は、AJAX 呼び出しが非同期であり.ddslick、XML が読み込まれる前にプラグインが呼び出されることです。コードを修正するには、次のように変更する必要があります。

xml2html();
$('select').ddslick();

このようなものに：

function xml2html() {
    $.ajax({
        url: 'test.xml',
        dataType: 'xml',
        success: function() {
            // ... process xml - create <option>
            $('select').ddslick();
        }
    });
}
于 2012-12-08T13:23:21.383 に答える