title: I need to toggle a select element in option tag
body: <p>Am looking to toggle a select element. I have a Select tag as follows :-</p>
  
  <pre><code> &lt;select id="orgAssign" multiple="true"&gt;
     &lt;option selected="" value="10047"&gt;test1&lt;/option&gt;
     &lt;option selected="" value="10046"&gt;test2&lt;/option&gt;
     &lt;option value="10033"&gt;test3&lt;/option&gt;
     &lt;option value="10032"&gt;test4&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>As seen from the html, the selected options have values, 10047 &amp; 10046. This is native select from the browser. I want to toggle the options. That is  When the user clicks on them the first time, they are highlighted(selected) &amp; when the user clicks on the same element the second time the element is unhighlighted(deselected). </p>
  
  <p>The jquery am trying to achieve this is as follows:-</p>
  
  <pre><code>highlightOrg: function(event){
  
      var $el = $(event['target']);
  
      $el.toggle().css({'background-color':'#dadfff'});
  
  }
  </code></pre>
  
  <p>The element is highlighted(selected), but when the user clicks on it the second time, it is not unhighlighted(deselected). Any help is appreciated.</p>