“选择/取消选择”多个选择字段

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

当然，它会在用户从下拉列表中选择某些内容后立即清除所选值。

您已经将<select>放在了受.click()函数影响的区域内。因此，每当用户单击下拉列表来选择某项内容时，您的函数就会运行--并且选择会被清除。

您必须更改UI，以便单击以清除选择的位置位于其他位置。

Answer 2

是的，您将事件绑定到了整个表格单元格中，选择框和文本所在的位置，所以它会同时影响这两个单元格。修复代码：

<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;
});

Answer 3

在Drupal7中，当您单击第一个选择框( edit-tid-2)时，为了取消选择另外两个选择框名称edit-tid-3和edit-tid-4，您需要使用write following。

jQuery("#edit-tid-2").bind('click', function(){
                jQuery('#edit-tid-3 option:selected').removeAttr("selected");
                        jQuery('#edit-tid-4 option:selected').removeAttr("selected");
                        return false;
    });