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与动态创建的选项字段在选择

回答

相关问题