jquery - "Select/Unselect"多选字段

Question

我在表列中定义了多个选择字段，

<table border=1>
    <tr>
        <td>THIS IS THE PLACE TO SELECT THE PROJECTS</td>
    </tr>
    <tr>
    <td id="select_project">
      <select class="projects" id="projects" multiple="multiple" name="projects[]" size="10">
       <option value="1">Project 1</option> 
       <option value="2" selected="selected">project 2</option> 
       <option value="3">Project 3</option>
     </select>
   CLICK HERE SHOULD "UNSELECT"
</td>
</tr>
</table>

我希望有一个功能，当用户单击选择字段之外的列的空间时，所有选定的选项应返回到未选定状态，我使用以下jquery来实现，

$("#select_project").bind('click', function(){
    $('#projects option').attr('selected', false);
    return false;
});

它可以工作，但它也会影响选择字段，即当用户选择一个选项时，它立即自动变回未选择状态，如何摆脱这种情况？

Answer 1

嗯，是的，您将事件绑定(bind)到整个表格单元格，其中选择框和文本所在，因此它会影响它们两者。固定代码:

<table border=1>
    <tr>
        <td>THIS IS THE PLACE TO SELECT THE PROJECTS</td>
    </tr>
    <tr>
    <td id="select_project">
      <select class="projects" id="projects" multiple="multiple" name="projects[]" size="10">
       <option value="1">Project 1</option> 
       <option value="2" selected="selected">project 2</option> 
       <option value="3">Project 3</option>
     </select>
   <a href="#" id="unselect">CLICK HERE SHOULD "UNSELECT"</a>
</td>
</tr>
</table>

$("#unselect").bind('click', function(){
    $('#projects option:selected').removeAttr("selected");;
    return false;
});