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

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

<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>

---

它可以工作，但也会影响选择字段，即当用户选择一个选项时，它会立即自动变回未选择状态，如何消除此问题？

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

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

---

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

是的，您将事件绑定到了整个表格单元格，其中选择框和文本都在其中，因此它会影响它们。固定代码：

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

---

在Drupal 7中，当您单击第一个选择框edit-tid-2时，您需要编写以下命令，以使取消选择其他两个选择框的名称为edit-tid-3和edit-tid-4

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

---

我的方法会有点不同，只依赖于选择点击，而不必添加新的按钮/链接来取消选中，如果没有人关心添加sel_val属性，当然，所有这些都在$function{//HERE}；：

---

解决这个问题而不产生副作用的最好方法是使用下面的代码

$("select[multiple] option")
 .attr({"d_sel":false,"selected":false})
 .mouseover(function(){this.d_sel=this.selected;})
 .click(function(){this.d_sel=(this.selected=(!this.d_sel));});

---

这不是有效的xhtml。。。对于选定状态，选定=选定；对于未选定状态，删除属性！p、 s.取消选择比取消选择要冷得多

$('select[multiple=multiple]').on('click',function(e){
    e.preventDefault();
    var $this = $(this);
    var selectedOpts = $("option:selected",$this);
    if(selectedOpts.length == 1){
        selectedOpts.each(function(){
            if($this.attr('sel_val') == $(this).val()){ // if clicking 2nd time on this
                selectedOpts.removeAttr('selected');
                $this.removeAttr('sel_val');
                $this.trigger('blur');
            }else // if clicking for the first time
               $this.attr('sel_val',$(this).val());
        });
    }

});

$('select[multiple=multiple]').each(function(){
    var $this = $(this);
    var selectedOpts = $("option:selected",$this);
    if(selectedOpts.length == 1){ // if one item selected only, make it unselectable
        selectedOpts.each(function(){
            $this.attr('sel_val',$(this).val());
        });
    }
});

$("select[multiple] option")
 .attr({"d_sel":false,"selected":false})
 .mouseover(function(){this.d_sel=this.selected;})
 .click(function(){this.d_sel=(this.selected=(!this.d_sel));});