title: With select2, how to access the original select/input element after it's been processed?
body: <p>I'm using a combination of <code>JQuery EasyUI</code> and <code>Select2</code> to be able to drag options from a right panel, onto a left select box.</p>
  
  <p>In the original HTML, the select boxes are empty, and I only "add" anything to them if I drop an option on them,</p>
  
  <pre><code>&lt;form id="section1"&gt;
  &lt;select class="select2" class="drop_target" id="selected_options" name="selected_options"&gt;&lt;/select&gt;
  &lt;div&gt;
  &lt;div class="draggable_option" data-id="1234"&gt;1234&lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;form id="section2"&gt;
  &lt;select class="select2" class="drop_target"&gt;&lt;/select&gt;
  &lt;div&gt;
  &lt;div class="draggable_option" data-id="1235" id="selected_options" name="selected_options"&gt;1235&lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Then in javascript, I do something like this,</p>
  
  <pre><code>$('.drop_target').droppable({
      accept: '.draggable_option',
      onDrop:function(e, source){
          var $dragged_source = $(source);
          var $drop_target = $(this);
      }
  });
  </code></pre>
  
  <p>The problem comes at this point, if you're dynamically adding things to the select, you have to check it doesn't exist, and if it doesn't, you create a new option, and add it,</p>
  
  <pre><code>var new_option = {
      id: $drag_source.data('id'), data_id: $drag_source.data('id'),
      text: $drag_source.val(), selected: true};
  
  // Set the value, creating a new option if necessary
  if (!$drop_target.find("option[value='" + new_option.id + "']").length) {
      // Append it to the select
      $drop_target.append(new Option(
          new_option.text, new_option.id, true, true)).trigger('change');
  }
  
  var data = $drop_target.select2('data');
  $drop_target.select2('data', data.concat([new_option]));
  </code></pre>
  
  <p>Clear as mud?  Unfortunately it goes wrong at this point.  While all calls to <code>.select2</code> from <code>$drop_target</code> work as expected, this is <em>not</em> the <code>select</code> that was originally in the HTML, this is a <code>div</code> that <code>select2</code> created, after hiding the original <code>select</code>, with an id attribute like <code>id="s2id_selected_options"</code>.  So when we append the new option to it, it <em>doesn't</em> get added to the select, and gets added to <code>select2</code>'s div incorrectly instead.</p>
  
  <p>My HTML pseudocode is deliberately set up in this "obtuse" way, because my page is like that.  I have multiple forms, and multiple "identical" selects in those forms, generated by <code>WTForms</code>.  So the "general" method of selecting your select by id, <code>$('#selected_options')</code> doesn't work correctly.</p>
  
  <p>What I need to do, within the javascript, is gain access directly to the <em>original</em>, now hidden, <code>select</code>, and I can't access it via id.</p>