javascript - 无法获取要呈现的 jQuery-ui 选择菜单

Question

我正在使用 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 开发人员工具切换该属性时，我看到一个标准的 HTML 选择。

我尝试使用匿名函数调用 .selectmenu() 以及 document.ready，但没有成功

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

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

有什么想法吗？

TLDR 回答:我在将 selectmenu 的父元素附加到 DOM 之前调用了 .selectmenu()，在我附加了元素之后调用了它。

Answer 1

必须将 select 元素(变量 named 输入)添加到 DOM:

document.body.appendChild(input); 

工作 fiddle :https://jsfiddle.net/beaver71/n4rvo8qy/