CODEWITHSUNDEEP
javascripthtml
selladurai
selladurai

Reputation: 6779

selected value not appear in select option in html

I create option dynamically. I bind the all values but when I select value from dropdown menu it not display in the combo box. help me how to fix this. thanks in advance

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

Upvotes: 1

Views: 2194

Answers (1)

SergO
SergO

Reputation: 2829

Try this:

<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>

Upvotes: 1

Related Questions