title: "Select / Unselect" multiple select fields
body: <p>I have a multiple select fields defined in a table column, </p>
  
  <pre><code>&lt;table border=1&gt;
      &lt;tr&gt;
          &lt;td&gt;THIS IS THE PLACE TO SELECT THE PROJECTS&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td id="select_project"&gt;
        &lt;select class="projects" id="projects" multiple="multiple" name="projects[]" size="10"&gt;
         &lt;option value="1"&gt;Project 1&lt;/option&gt; 
         &lt;option value="2" selected="selected"&gt;project 2&lt;/option&gt; 
         &lt;option value="3"&gt;Project 3&lt;/option&gt;
       &lt;/select&gt;
     CLICK HERE SHOULD "UNSELECT"
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I would like to have the feature that when user click on the space of the column besides the selection field, all selected options should back to unselected status, I have used the following jquery to implement,</p>
  
  <pre><code>$("#select_project").bind('click', function(){
      $('#projects option').attr('selected', false);
      return false;
  });
  </code></pre>
  
  <p>It works but it also affect the selection field, that's when user select a option, it immediately change back to unselected status automatically, how to get rid of this?</p>