"Select / Unselect" multiple select fields
<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>
