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

Question

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

我正在使用 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.

时，我可以看到菜单

此外，select 元素位于 DOM 中，但自动赋予 CSS 属性 "display: none"。使用 Chrom 开发人员工具切换该属性时，我看到一个标准 HTML select.

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

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

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

有什么想法吗？

TLDR 回答：我在将 selectmenu 的父元素附加到 DOM 之前调用了 .selectmenu()，在我附加了元素让这个工作。

Answer 1

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

document.body.appendChild(input);

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

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

Unable to get jQuery-ui selectmenu to render

javascript

jquery

jquery-ui

jquery-selectors

jquery-ui-selectmenu