ddSlick 在选择中具有动态创建的选项字段

Question

这是我的问题：

我正在使用 ddSlick 插件来实现带有标志的语言下拉菜单。问题是我正在从 xml 文件动态创建这个下拉列表。一切正常，选择已正确创建，但 ddSlick 插件看不到这些选项字段。我 100% 确定他们拥有所有必要的数据值。

此外，似乎 ddSlick 在我的脚本之前运行（即使它在我的脚本之后被链接），因为当我以静态方式（不是通过解析 xml，而是直接将其放入 HTML 文档）放置选项时，一切都很好.这是我的代码：

运行我的 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 插件的未压缩版本）。

我试图在一个或两个单独的 <script></script> 块中以链的形式运行这些函数（我的 xml 解析和 ddSlick），但没有成功。我希望我正确地描述了一切。请帮忙！

Answer 1

我可以通过获取您描述的Uncaught TypeError 来重现您的代码。当您在空选择上应用插件时会发生这种情况（检查fiddle 中的控制台）。您的问题是 AJAX 调用是 asynchronous 并且 .ddslick 插件在加载 XML 之前被调用。因此，要修复您的代码，您需要进行更改：

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

这样的：

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