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

Don't think that your case will created memory leaks - unless if you are creating the element using JS code and then inserting it to the DOM. If you have the select element html code in place and just populate the options using JS i don't think that you will be having memory leaks — Andreas
– Andreas, Commented Oct 1, 2010 at 17:35

gen_Eric · Accepted Answer · 2010-10-01 17:32:30Z

3

Use jQuery's .data() function instead.

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

answered Oct 1, 2010 at 17:32

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

joshperry Over a year ago

Thanks for providing the link and changing the example.

T.J. Crowder · Accepted Answer · 2010-10-01 17:40:31Z

1

You can certainly attach objects to element instances the way you have; in fact, that's how jQuery does its data magic behind-the-scenes in the current version.

That said, since you're using jQuery already, I'd probably use the jQuery API for this (data) instead, just in case it turns out that at some stage, a browser comes on the scene where a workaround is required — you'll get the benefit of the jQuery maintainers doing the workaround for you, rather than having to do it yourself.

Here's what it would look like using data. Basically to set the data:

opt.data("obj", item);

...and to retrieve and show its type property:

alert(opt.data("obj").type);

...where in each case, opt is a jQuery object for the option element in question.

One slight "gotcha" with jQuery's data function: If you retrieve a data object you've never set, you'll get null back (rather than undefined, which would be the usual JavaScript convention).

edited Oct 1, 2010 at 17:40

answered Oct 1, 2010 at 17:34

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

1 Comment

joshperry Over a year ago

Great!, that's exactly what I was looking for.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related