ddSlick與動態創建的選項字段在選擇

我使用ddSlick插件來實現語言下拉與標誌。問題是我從xml文件動態創建這個下拉列表。一切正常，選擇正確創建，但ddSlick插件沒有看到這些選項字段。我100％肯定他們擁有所有必要的數據值。

此外，似乎ddSlick在我的腳本之前運行（即使它是在我的腳本後面鏈接），因爲當我以靜態方式（而不是通過解析xml，而是直接將其直接放入HTML文檔）精細。這裏是我的代碼：

XML解析後

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

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>

HTML ddSlick後運行：運行我xml2html js函數之前

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>

另外，我請注意瀏覽器控制檯中的錯誤：第246行中的Uncaught TypeError: Cannot read property 'imageSrc' of undefined（未壓縮版本的ddSlick插件）。

我試圖在一個或兩個獨立的<script></script>塊中運行這些函數（我的xml解析和ddSlick）作爲鏈，但沒有成功。我希望我能正確描述一切。請幫忙！

來源

2012-12-08 mrmnmly

我可以用你描述的Uncaught TypeError重現你的代碼。它發生在你將插件應用於空選擇時（檢查控制檯fiddle）。你的問題是，AJAX調用是異步和.ddslick插件先前調用XML正在加載。因此，要解決你的代碼，你需要改變：

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

爲了這樣的事情：

function xml2html() { 
    $.ajax({ 
     url: 'test.xml', 
     dataType: 'xml', 
     success: function() { 
      // ... process xml - create <option> 
      $('select').ddslick(); 
     } 
    }); 
}

來源

2012-12-08 13:23:21 Inferpse

ddSlick與動態創建的選項字段在選擇

回答

相關問題