无法获取jQuery-ui selectmenu进行渲染

Posted 2021-03-28

我正在使用javascript动态创建一个选择菜单，但我无法在屏幕上看到它。我不确定我错过了什么。

我正在使用jQuery 2.2.4和jQuery-ui 1.11.4

这是我的javascript：

var input = document.createElement('select');

for(var i = 0; i < settingOptions.length; i++) 
{ 
    var optionValue = new String(settingOptions[i]);

    var option = document.createElement('option');
    option.setAttribute('value', optionValue);
    option.innerText = optionValue;

    if(optionValue.valueOf() === settingValue.valueOf())
    {
        $(option).prop('selected', true);
    }

    input.appendChild(option);
}

$(function(){
    $(input).selectmenu();
});

不使用jQuery渲染时，菜单正在创建;当我不调用.selectmenu（）作为标准html选择时，我可以看到菜单。

此外，select元素位于DOM中，但会自动赋予CSS属性“display：none”。使用Chrom Developer Tools切换该属性时，我看到了标准的HTML选择。

我试图使用匿名函数调用.selectmenu（），以及document.ready，但没有成功

$(document).ready({
    $(input).selectmenu();
}

当我在Chrome控制台中评估操作时，我的选择器似乎正在工作，因为我正在获取jQuery对象。

有任何想法吗？

TLDR回答：我在将我的selectmenu的父元素附加到DOM之前调用了.selectmenu（），在我添加了这个元素之后调用它。

答案

必须将select元素（变量named输入）添加到DOM：

document.body.appendChild(input); 

工作小提琴：https://jsfiddle.net/beaver71/n4rvo8qy/