How do I store a jquery object on a HTML element property?
<p>I have a <code>&lt;select&gt;</code> form element where I create multiple <code>&lt;option&gt;</code> children based on looping through a jQuery array of objects.</p>

<p>I want to store each jQuery associated with an <code>&lt;option&gt;</code> on the <code>&lt;option&gt;</code> itself, I guess as a property. So that when I get the change event fired I can pull out the jQuery object which the <code>&lt;option&gt;</code> was based on.</p>

<p>I thought I could just set it using attr, serializing the object into JSON, but its not working. Any ideas?</p>

<p>Here is some code:</p>

<pre><code>// creating the select: (data is a jquery array of objects)
    $(data).each(function() {
        var opt = $('&lt;option&gt;&lt;/option&gt;').val(this[id_property]).html(this[label_property]);
        // preserve the original jquery object on this &lt;option&gt; element:
        opt.attr('json', JSON.stringify(this));
        $(select).append(opt);
    });

// bind the onchange event, and try to recreate that original jquery object
    $(select).bind('change', function(event) {
        // this gives me a ref to the &lt;option&gt; element:
        var val = $(select).find(":selected");
        // now how to get the original jquery object?
        var item = $(val).attr('json');        
    });
</code></pre>

<p>I want that last line setting var item to the original jquery object - or somehow recreate it. I even tried doing an <code>eval()</code> passing in item since it is JSON formatted but it throws an error.</p>
