Is there a way to attach a Javascript object to a Select Option

Question

When building up a list of options in a select list using Javascript I'd like to attach a Javascript object to that option that I could easily retrieve in the change event.

So, while writing this question I wanted to provide some sample code and found a way to make this work; so I have a slight addition to the question. Is it bad to attach javascript object to DOM elements? Back in the day I remember there being issues with memory leaks in certain circumstances.

Here's a working example: http://jsbin.com/afolo3/edit

var objs = [
  { id: 1, value: "One", type: "number" },
  { id: 2, value: "Two", type: "number" },
  { id: 3, value: "Three", type: "number" },
  { id: "A", value: "A", type: "char" },
  { id: "B", value: "B", type: "char" },
  { id: "C", value: "C", type: "char" },
  ];

var options = $.map(objs, function(item, idx) {
  var opt = $("<option/>").val(item.id).text(item.value);
  opt[0]["obj"] = item;
  return opt;
});

$.fn.append.apply($("#select"), options)
  .change(function() {
    $("#select option:selected")
      .each(function(){
    alert(this.obj.type);
      });
  });

Answer 1

Use jQuery's .data() function instead.

Updated example: http://jsbin.com/afolo3/2