Dynamically populating Select options with jQuery

Question

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?

Why the data so verbose? You can simplify and abstract if you get straight collections from your JSON, not a nested object. — elclanrs
– elclanrs, Commented Feb 18, 2014 at 1:51
Yes that would be what I am looking for... so not having each list coming from a unique defined variable but a master JSON list instead. — isaac weathers
– isaac weathers, Commented Feb 18, 2014 at 1:54

elclanrs · Accepted Answer · 2014-02-18 02:10:04Z

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'
});

That's exactly what I was looking for. Thank you. Gave you the win.

Collectives™ on Stack Overflow

Dynamically populating Select options with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related