선택한 값이 html의 선택 옵션에 표시되지 않습니다.

Question

나는 동적으로 옵션을 만듭니다. 모든 값을 바인딩하지만 드롭 다운 메뉴에서 값을 선택하면 콤보 상자에 표시되지 않습니다. 이 문제를 해결하는 방법은 도와주세요. 사전에 감사

HTML :

<select name= "cityNameOption" id = "cityNameOption" > 
    <option value="0">All</option></select> 

JS :

// cityList = [{"id":3,"name":"Hospitals"},{"id":1,"name":"Hotels"},{"id":2,"name":"Shopping Mall"}]; 


     var cityObject = jQuery.parseJSON(cityList); 
     var cityOptions = document.getElementById("cityNameOption"); 


    for (var i = 1; i <= cityObject.length; i++) { 

     cityOptions.options[i] = new Option(cityObject[i - 1].name, cityObject[i - 1].id); 
    } 

Answer 1

이 시도 :

이

<select name= "cityNameOption" id = "cityNameOption" > 
    <option value="0">All</option> 
</select> 
<script type="text/javascript"> 
    //warning 1: js-code must be after HTML 
    //warning 2: JSON-object must be as a string; 
    var cityList = '[{"id":3,"name":"Hospitals"},{"id":1,"name":"Hotels"},{"id":2,"name":"Shopping Mall"}]'; 
    var cityObject = $.parseJSON(cityList); 
    for (var i = 1; i <= cityObject.length; i++) { 
    $("#cityNameOption").append('<option value='+cityObject[i - 1].id+'>'+cityObject[i - 1].name+'</option>'); 
    } 
</script>