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

我有一个表列定义的多个选择字段，“选择/取消选择”多重选择字段

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

它的工作原理，但它也影响到选择栏，这时候用户选择一个选项，它会立即变回未选择自动状态，如何摆脱这个？

来源

2011-01-26 Mellon

p.s. “取消选择”比“取消选择”要冷得多 – ash 2011-01-26 10:36:54

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

您已将<select>放置在受.click()功能影响的区域内。因此，无论何时用户在下拉列表上点击以选择某项内容，都会运行您的功能 - 并清除选择内容。

您必须更改用户界面，以便点击清除所选内容的位置在其他位置。

来源

2011-01-26 10:18:16

嗯，是的，你将事件绑定到整个表格单元格，其中选择框和文本是，所以它影响到他们两个。固定码：

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

来源

2011-01-26 10:21:55 usoban

这不是xhtml-valid ...对于选定状态`selected =“选择”`和非选择状态取消属性！ – 2011-01-26 10:24:22

在Drupal 7的，你需要有写，以便使取消选择其他两个selectboxes名编辑TID-3和编辑的TID 4以下时，你点击第一个选择框（编辑TID -2）

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

来源

2012-01-17 07:12:49 drupalchamp

我的做法是有点不同，只有选择点击依托，而无需添加一个新的按钮/链接取消，如果无人问津添加sel_val属性<select></select>，所有课程中$(function(){ //HERE });：

$('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()); 
     }); 
    } 
});

来源

2012-09-04 10:35:45

解决此问题而不产生副作用的最佳方法是使用波纹管代码。

$("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));});

来源

2015-05-17 11:34:48

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

回答

相关问题