JSON Array to Populate Select Field

Change class name on click in jQuery

by Matthew Schenker

HTML

<h1>Select populated from JSON data in Jquery</h1>
     <div id="container"></div>

CSS

h1 {
       font-weight: bold;
       font-size: 2rem;
     }

     select {
       width: 150px;
     }

JavaScript

$(document).ready(function() {
           var json = [{
               "value": "111",
               "text": "Listing 111"
             },
             {
               "value": "222",
               "text": "Listing 222"
             },
             {
               "value": "333",
               "text": "Listing 333"
             }
           ];
           var select = $("<select></select>").attr("id", "listingid").attr("name", "listingid");
           $.each(json, function(index, json) {
             select.append($("<option></option>").attr("value", json.value).text(json.text));
           });
           $("#container").html(select);
         });