javascript - 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 插件的未压缩版本)。

我试图将这些函数(我的 xml 解析和 ddSlick)作为链运行，在一个或两个单独的 <script></script> 中 block 但没有成功。我希望我正确地描述了一切。请帮忙!

Answer 1

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

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

像这样:

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