Javascript 在选择中使用动态创建的选项字段单击

我的问题是：

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

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

在运行我的xml2html js函数之前，请执行以下操作：

<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>

选择。。
美国
大不列颠联合王国
法国
德国
荷兰

另外，我注意到浏览器控制台中有一个错误：

uncaughttypeerror:无法读取第246行（ddSlick插件的未压缩版本）中未定义的属性“imageSrc”

我试图将这些函数（我的xml解析和ddSlick）作为一个链，在一个或两个独立的
块中运行，但没有成功。我希望我描述的一切都是正确的。请帮忙
 我可以通过获取您描述的
uncaughttypeerror
来重现您的代码。当您在空选择上应用插件时（检入控制台），就会发生这种情况。您的问题是AJAX调用是异步的，并且
在加载XML之前调用了ddslick
插件。因此，要修复代码，您需要更改：

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

对这样的事情：

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

函数xml2html（）{
$.ajax({
url:'test.xml'，
数据类型：“xml”，
成功：函数（）{
//…处理xml-创建
$（'select'）.ddslick（）；
}
});
}
我可以通过获取您描述的
未捕获的TypeError
来重现您的代码。当您在空选择上应用插件时（检入控制台），就会发生这种情况。您的问题是AJAX调用是异步的，并且
在加载XML之前调用了ddslick
插件。因此，要修复代码，您需要更改：

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

对这样的事情：

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

函数xml2html（）{
$.ajax({
url:'test.xml'，
数据类型：“xml”，
成功：函数（）{
//…处理xml-创建
$（'select'）.ddslick（）；
}
});
}