title: Dynamically populating Select options with jQuery
body: <p>I'm looking for a better way to handle dynamic populating of my options using JS and JQuery. What I have is working but I am looking for a way to not have t ore-write the function each time I need to populate a list.</p>
  
  <p><a href="http://jsfiddle.net/9qCjE/" rel="nofollow">Fiddle</a></p>
  
  <p>And what I am doing is populating these:</p>
  
  <pre><code>&lt;label for="recordPurchaseTimeFrameID" class="input required"&gt;When would you like to move?&lt;/label&gt; 
  &lt;select name="recordPurchaseTimeFrameID" id="recordPurchaseTimeFrameID" class="inputclass pageRequired" title="Select a Time Frame"&gt;
  </code></pre>
  
  <p> </p>
  
  <pre><code>&lt;label for="recordPurchasePriceRangeID" class="input required"&gt;Purchase price range:&lt;/label&gt;
  &lt;select name="recordPurchasePriceRangeID" id="recordPurchasePriceRangeID" class="inputclass pageRequired" title="Select a Price Range"&gt;
  </code></pre>
  
  <p>Using these scripts:</p>
  
  <pre><code>var rPTJsonListItems= "";
  for (var i = 0; i &lt; rPTJsonList.recordPurchaseTimeTable.length; i++){
  rPTJsonListItems+= "&lt;option value='" + rPTJsonList.recordPurchaseTimeTable[i].recordPurchaseTimeValue + "'&gt;" + rPTJsonList.recordPurchaseTimeTable[i].recordPurchaseTimeAmount + "&lt;/option&gt;";
    };
    $("#recordPurchaseTimeFrameID").html(rPTJsonListItems); 
  
  var rPPJsonListItems= "";
  for (var i = 0; i &lt; rPPJsonList.recordPurchasePriceTable.length; i++){
  rPPJsonListItems+= "&lt;option value='" + rPPJsonList.recordPurchasePriceTable[i].recordPurchasePriceValue + "'&gt;" + rPPJsonList.recordPurchasePriceTable[i].recordPurchasePriceAmount + "&lt;/option&gt;";
    };
    $("#recordPurchasePriceRangeID").html(rPPJsonListItems); 
  </code></pre>
  
  <p>And using this to populate the dropdowns:</p>
  
  <pre><code>var rPTJsonList = {
  "recordPurchaseTimeTable" : 
              [
              {"recordPurchaseTimeValue" : "","recordPurchaseTimeAmount" : "Select"},
  ....
  ]};
  var rPPJsonList = {
  "recordPurchasePriceTable" : 
              [
              {"recordPurchasePriceValue" : "","recordPurchasePriceAmount" : "Select"},
              {"recordPurchasePriceValue" : "75k-100k","recordPurchasePriceAmount" : "$75,000 - $100,000"},
  ....
  });
  </code></pre>
  
  <p>So what I'd like is to have just one main function that populates each unique ID based on it's correlating JSON. </p>
  
  <p>Anyone have any suggestions? </p>