How to dynamically populate a select element from JSON data with jquery?

HTML:
    <p>
          <label for="people">People: </label>
           <select id="people" ></select>
            </p>

          <script type="text/JavaScript">

       $select = $('#people');

         $.ajax({
        url:   "http://localhost:58421/jsonfiles/person.json",
        dataType: 'JSON',
        success: function (data) {
           alert("data");
          $select.html('');
           $.each(data.person, function(key, val){
           $select.append('<option id="' + val.id + '">' + val.name + '</option>');
            })
            },
           error: function () {
           $select.html('<option id="-1">none available</option>');
               }
             });
           </script>

person": [
  {
    "id": "1",
    "name": "Person1"
  },
  {
    "id": "2",
    "name": "Person2"
  },
  {
    "id": "3",
    "name": "Person3"
  }
]}