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>

另外，我注意到浏览器控制台中出现错误：第246行Uncaught TypeError: Cannot read property 'imageSrc' of undefined（未压缩版本的ddSlick插件）。

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

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();
        }
    });
}

dd在select中使用动态创建的选项字段单击

1 个答案: