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.

beaver · Accepted Answer · 2017-12-19 19:15:39Z

1

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

document.body.appendChild(input);

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

answered Dec 19, 2017 at 19:15

beaver

17.8k2 gold badges43 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jseashell Over a year ago

I've got this object actually nested as a child of several objects (using a table to organize the different inputs on screen, so this is nested in a td, nested in a tr, nested in a table). Should it be explicitly added? Or am I okay just calling appendChild and passing the top level parent? I'm calling .selectmenu() prior to appending the parent table to the DOM, so I'm guessing as long as I call it after then I should be fine

beaver Over a year ago

Yes, it should. For example, you can append the element as a child of an existing div: $("#mydiv").append($(input));

Collectives™ on Stack Overflow

Unable to get jQuery-ui selectmenu to render

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related