jQuery-ui 선택 메뉴를 렌더링 할 수 없습니다.

Question

javascript를 사용하여 선택 메뉴를 동적으로 생성하지만 화면에 표시되지 않습니다. 나는 내가 무엇을 놓치고 있는지 확신하지 못한다. 내가 jQuery를 2.2.4와 jQuery를-UI 여기 1.11.4

을 사용하고

내 자바 스크립트입니다 : jQuery를 렌더링하지 않을 경우 메뉴가 잘 생성되는

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

; .selectmenu()를 표준 HTML 선택 항목으로 호출하지 않으면 메뉴가 표시됩니다.

또한 select 요소는 DOM에 있지만 CSS 속성 인 "display : none"이 자동으로 주어집니다. Chrom Developer Tools를 사용하여 해당 속성을 토글 할 때 표준 HTML을 선택합니다.

내가 성공하지 않고, 익명 함수뿐만 아니라 document.ready를 사용하여 .selectmenu()를 호출하는 것을 시도했다

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

나의 선택은 내가 jQuery를 때 다시 객체를 얻고로 작동하는 것처럼 보인다 Chrome 콘솔에서 작업을 평가합니다.

아이디어가 있으십니까?

TLDR 대답 : 내 selectmenu의 부모 요소를 DOM에 추가하기 전에 .selectmenu()를 호출했습니다.이 요소를 추가 한 후에이 요소를 추가 한 후에이 함수를 호출했습니다.

Answer 1

select 요소 (변수 named 입력) DOM에 추가해야합니다 :

이

document.body.appendChild(input); 

근무 바이올린 : 나는 실제로 여러 개체의 자식으로 중첩 된 객체를 가지고 https://jsfiddle.net/beaver71/n4rvo8qy/