jquery-ui selectmenu - 드롭 다운 옵션을 동적으로로드하는 중 "메뉴 위젯 인스턴스의 해당 메소드가 없습니다"와 일치 함

Question

ID가 TestList 인 드롭 다운 목록 (선택 목록)이 있습니다.

jQuery UI의 selectmenu으로 사용하고 싶습니다. 이 드롭 다운에는 동적으로 채워지 기 때문에 처음에는이 선택 목록에 옵션이 없습니다. 스크립트 섹션에서 , 내가 처음으로 선택 메뉴 선택 목록을 초기화하고 있습니다 :

$("#TestList").selectmenu(); 

다음, 나는 동적 데이터로 채울하려는, 그래서이 일을 오전 :

for (var i = 0; i < data.length; i++) {   
    $('#TestList').val(data[i]); 
    $("#TestList").selectmenu("refresh"); 
} 

을하지만, 문제는 던졌습니다. 잡히지 않은 오류 : 메뉴 위젯 인스턴스에 해당하는 '인스턴스'메소드가 없습니다.

나는 뒤이어 How to select an option in a jQuery ui selectmenu dynamically?을 추적하지만 문제는 여전히 지속됩니다. 나는 DEMO을 만든

Answer 1

: 나는 .. 날이 문제를 해결하는 데 도움이 바랍니다 목록을 최신 jQuery를 UI 패키지 (JQuery와-UI-1.12.1.custom)와 jQuery를 1.9을 사용하고 있습니다.

이 DEMO :

1. Dynamically initializes the selectmenu widget on the HTML dropdown
2. Dynamically create/load options
3. Dynamically select a specific option in the dropdown

나는 당신에게 큰 도움이 것 같아요! 당신은`data`의 배열을 제공하시기 바랍니다 수있는 소스 코드에서

<script> 
    $(function() { 
    $('#initialize').click(function() { 
     $("#speed").selectmenu(); 
     $('#status').html('The widget is now initialized. But it is still empty and does not contain any options.'); 
     $('#add_options').removeAttr('disabled'); 
     $('#initialize').attr('disabled',''); 
    }); 


     $('#add_options').click(function() { 
     // Add a new option to the dropdown 
     $('#speed').append($('<option>', { 
      value: 1, 
      text: 'Option 1' 
     })); 
     $('#speed').append($('<option>', { 
      value: 2, 
      text: 'Option 2' 
     })); 
     $('#speed').append($('<option>', { 
      value: 3, 
      text: 'Option 3' 
     })); 
     //Refresh the selectmenu widget so the newly added options to the dropdown are now loaded properly 
     $('#speed').selectmenu("refresh"); 

     $('#status').html('The new options are now added dynamically!!'); 
     $('#select_option').removeAttr('disabled'); 
     $('#add_options').attr('disabled',''); 
    }); 

    $('#select_option').click(function() { 
     $('#speed').val(3); 
     $('#speed').selectmenu("refresh"); 

     $('#status').html('Options 3 is now selected!!'); 
     $('#select_option').attr('disabled',''); 
    }); 
    }); 
    </script> 

<div class="demo"> 
<input type="button" value="Initialize the Widget" id="initialize"/> 
<br><br> 
<input type="button" value="Dynamically Add New Options" id="add_options" disabled/> 
<br><br> 
<input type="button" value="Select the 'Option 3'" id="select_option" disabled/> 
<form action="#"> 
    <br> 
    <div id="status" style="font-weight:bold;">This is the simple default HTML dropdown</div> 
    <br> 
    <label for="speed">Select a speed</label> 
    <select name="speed" id="speed"> 
    </select> 

</form> 

</div>