title: How can I populate a set of inputs with the data from the json object
body: <p>I have a json object that is loaded by jquery ajax &amp; populates my select like so:</p>
  
  <pre><code>function populateSelect(url, selectId) {
  
      var sel = $(selectId);
      $.ajax({
          url: url,
          dataType: 'json',
          success: function (data) {
              sel.empty();
              sel.append('&lt;option value="" selected&gt;&lt;/option&gt;');
              for (var i = 0; i &lt; data.length; i++) {
                  sel.append('&lt;option value="' + [i] + '"&gt;' + data[i].BusinessName + '&lt;/option&gt;');
              }
          }
      });
  
  };
  
  populateSelect('/api/buninesses', '#business');
  </code></pre>
  
  <p>example json that it returns:</p>
  
  <pre><code>[{"BusinessID":123,"BusinessName":"Test1","ContactName":"John Doe"},
  {"BusinessID":456,"BusinessName":"Test2","ContactName":"Sally Smith"}]
  </code></pre>
  
  <p>example select that it creates:</p>
  
  <pre><code>&lt;select id="business"&gt;
      &lt;option value=""&gt;&lt;/select&gt;
      &lt;option value="0"&gt;Test1&lt;/select&gt;
      &lt;option value="1"&gt;Test2&lt;/select&gt;
  &lt;/select&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>When some changes the select how can I populate a set of inputs with the data from the json object?</strong></p>
  
  <p>For example if someone chooses "Test1" then I want to populate the inputs with the correct data from the json object for the selection:</p>
  
  <pre><code>&lt;input id ="BusinessID" value="123"&gt;
  &lt;input id ="BusinessName" value="Test1"&gt;
  &lt;input id ="ContactName" value="John Doe"&gt;
  </code></pre>
  
  <p>if they choose "Test2" then the inputs should look like this:</p>
  
  <pre><code>&lt;input id ="BusinessID" value="456"&gt;
  &lt;input id ="BusinessName" value="Test2"&gt;
  &lt;input id ="ContactName" value="Sally Smith"&gt;
  </code></pre>