Unable to get jQuery-ui selectmenu to render

Question

I am creating a select menu dynamically using javascript but I cannot see it on screen. I am not sure what I am missing.

I am using jQuery 2.2.4 and jQuery-ui 1.11.4

Here is my 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();
});

The menu is being created fine when not rendering with jQuery; I can see the menu when I do not call .selectmenu() as a standard HTML select.

Additionally, the select element is in the DOM, but is automatically given the CSS attribute "display: none". When toggling that attribute using Chrom Developer Tools, I see a standard HTML select.

I have tried to invoke .selectmenu() using an anonymous function, as well as document.ready, without success

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

My selector does appear to be working as I am getting the jQuery object back when I evaluate the operation in the Chrome console.

Any ideas?

TLDR answer: I was calling .selectmenu() prior to appending the parent element of my selectmenu to the DOM, calling it after I've appended the elements got this working.

Answer 1

The select element (variable named input) must be added to DOM:

document.body.appendChild(input); 

Working fiddle: https://jsfiddle.net/beaver71/n4rvo8qy/