Dynamically populating Select options with jQuery

Issue

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.

Fiddle

And what I am doing is populating these:

<label for="recordPurchaseTimeFrameID" class="input required">When would you like to move?</label> 
<select name="recordPurchaseTimeFrameID" id="recordPurchaseTimeFrameID" class="inputclass pageRequired" title="Select a Time Frame">

<label for="recordPurchasePriceRangeID" class="input required">Purchase price range:</label>
<select name="recordPurchasePriceRangeID" id="recordPurchasePriceRangeID" class="inputclass pageRequired" title="Select a Price Range">

Using these scripts:

var rPTJsonListItems= "";
for (var i = 0; i < rPTJsonList.recordPurchaseTimeTable.length; i++){
rPTJsonListItems+= "<option value='" + rPTJsonList.recordPurchaseTimeTable[i].recordPurchaseTimeValue + "'>" + rPTJsonList.recordPurchaseTimeTable[i].recordPurchaseTimeAmount + "</option>";
  };
  $("#recordPurchaseTimeFrameID").html(rPTJsonListItems); 

var rPPJsonListItems= "";
for (var i = 0; i < rPPJsonList.recordPurchasePriceTable.length; i++){
rPPJsonListItems+= "<option value='" + rPPJsonList.recordPurchasePriceTable[i].recordPurchasePriceValue + "'>" + rPPJsonList.recordPurchasePriceTable[i].recordPurchasePriceAmount + "</option>";
  };
  $("#recordPurchasePriceRangeID").html(rPPJsonListItems); 

And using this to populate the dropdowns:

var rPTJsonList = {
"recordPurchaseTimeTable" : 
            [
            {"recordPurchaseTimeValue" : "","recordPurchaseTimeAmount" : "Select"},
....
]};
var rPPJsonList = {
"recordPurchasePriceTable" : 
            [
            {"recordPurchasePriceValue" : "","recordPurchasePriceAmount" : "Select"},
            {"recordPurchasePriceValue" : "75k-100k","recordPurchasePriceAmount" : "$75,000 - $100,000"},
....
});

So what I'd like is to have just one main function that populates each unique ID based on it's correlating JSON.

Anyone have any suggestions?

Solution

I would suggest you simplify your data as a collection, instead of nested objects, that way you can abstract more easily:

var timeTable = [{
  "recordPurchaseTimeValue": "",
  "recordPurchaseTimeAmount": "Select"
}, {
  "recordPurchaseTimeValue": "3-6",
  "recordPurchaseTimeAmount": "3-6 months"
}, {
  "recordPurchaseTimeValue": "6-9",
  "recordPurchaseTimeAmount": "6-9 months"
}, {
  "recordPurchaseTimeValue": "9-12",
  "recordPurchaseTimeAmount": "9-12 months"
}, {
  "recordPurchaseTimeValue": "12",
  "recordPurchaseTimeAmount": "Over 12 months"
}];

var priceTable = [{
  "recordPurchasePriceValue": "",
  "recordPurchasePriceAmount": "Select"
}, {
  "recordPurchasePriceValue": "75k-100k",
  "recordPurchasePriceAmount": "$75,000 - $100,000"
}, {
  "recordPurchasePriceValue": "100k-125k",
  "recordPurchasePriceAmount": "$100,000 - $125,000"
}, {
  "recordPurchasePriceValue": "125k-150k",
  "recordPurchasePriceAmount": "$125,000 - $150,000"
}, {
  "recordPurchasePriceValue": "150k-200k",
  "recordPurchasePriceAmount": "$150,000 - $200,000"
}, {
  "recordPurchasePriceValue": "200k-250k",
  "recordPurchasePriceAmount": "$200,000 - $250,000"
}, {
  "recordPurchasePriceValue": "250k-300k",
  "recordPurchasePriceAmount": "$250,000 - $300,000"
}, {
  "recordPurchasePriceValue": "300k-350k",
  "recordPurchasePriceAmount": "$300,000 - $350,000"
}, {
  "recordPurchasePriceValue": "350k-400k",
  "recordPurchasePriceAmount": "$350,000 - $400,000"
}, {
  "recordPurchasePriceValue": "400k-500k",
  "recordPurchasePriceAmount": "$400,000 - $500,000"
}, {
  "recordPurchasePriceValue": "500k-700k",
  "recordPurchasePriceAmount": "$500,000 - $700,000"
}, {
  "recordPurchasePriceValue": "700k-900k",
  "recordPurchasePriceAmount": "$700,000 - $900,000"
}, {
  "recordPurchasePriceValue": "900k",
  "recordPurchasePriceAmount": "$900,000"
}];

Then you can create a function to populate selects given the data as a collection, and the attributes to set on each generated option, that map to a given key.

We can use document fragments to improve performance, as you only need to append to the DOM once.

Demo: http://jsfiddle.net/Ls4mD/

function populateSelect(select, data, attrs) {
  var frag = document.createDocumentFragment();
  data.forEach(function(option) {
    var opt = document.createElement('option');
    for (var i in attrs) {
      opt[i] = option[attrs[i]];
    }
    frag.appendChild(opt);
  });
  select.appendChild(frag.cloneNode(true));
}

var time = document.getElementById('recordPurchaseTimeFrameID');
var price = document.getElementById('recordPurchasePriceRangeID');

populateSelect(time, timeTable, {
  value: 'recordPurchaseTimeValue',
  textContent: 'recordPurchaseTimeAmount'
});

populateSelect(price, priceTable, {
  value: 'recordPurchasePriceValue',
  textContent: 'recordPurchasePriceAmount'
});

Answered By - elclanrs