无法让 jQuery-ui 选择菜单呈现

Posted 2023-05-08

【中文标题】无法让 jQuery-ui 选择菜单呈现

【英文标题】：Unable to get jQuery-ui selectmenu to render

【发布时间】：2018-06-02 06:09:59

【问题描述】：

我正在使用 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 选择调用时，我可以看到菜单。

此外，选择元素位于 DOM 中，但会自动赋予 CSS 属性“display: none”。当使用 Chrom 开发者工具切换该属性时，我看到一个标准的 HTML 选择。

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

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

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

有什么想法吗？

TLDR 回答：我在将我的选择菜单的父元素附加到 DOM 之前调用了 .selectmenu()，在我附加元素后调用它使其正常工作。

【参考方案1】：

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

document.body.appendChild(input); 

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

【讨论】：

我有这个对象实际上嵌套为几个对象的子对象（使用表格来组织屏幕上的不同输入，所以它嵌套在 td 中，嵌套在 tr 中, 嵌套在 table) 中。是否应该明确添加？或者我可以调用 appendChild 并传递***父级吗？我在将父表附加到 DOM 之前调用了 .selectmenu()，所以我猜只要我调用它 after 那么我应该没问题

是的，应该。例如，您可以将元素附加为现有 div 的子元素：$("#mydiv").append($(input));