jquery - 单击列表框中的项目后，使用 jquery 再次取消选择它

Question

我有如下代码的列表框：

<select onchange="saveQuery(this);" id="savedQuery" size="10" name="savedQuery[]">
  <option value="xyz">XYZ</option>
  <option value="mno">MNO</option>
</select>

和功能：

 function saveQuery(ptr){
     var queryName;
     var $queryName = $('#savedQuery option:selected').val()
     $("#query").val($queryName);        
 }

在这里，在更改时，我正在获得所选项目的价值。

我想在同一次点击时再次取消选择它。这意味着一次选择和取消选择。

Answer 1

使用道具（）

function saveQuery(ptr){
  var queryName;
  var $queryName = $('#savedQuery option:selected').val()
  $("#query").val($queryName);
  $("#savedQuery option:selected").prop("selected", false) ;      
}

Answer 2

获取一个空字符串的值$('#savedQuery')会起作用。

$('#savedQuery').val(''); 

这是jsfiddle。http://jsfiddle.net/CfDmc/

Answer 3

使用 jQuery清除 a 的最简单方法select是将其值设置为空字符串。

由于您正在传递this到处理程序，因此无需在 DOM 中为$('#savedQuery')代码创建新的搜索。也$('select').val()将与$('select option:selected').val().

function saveQuery(ptr){
     var $this=$(ptr);
     var $queryName = $this.val();
     $("#query").val($queryName);
     /* reset*/
     $this.val('');        
 }

Answer 4

您可以使用以下任何选项：

$("#savedQuery").val([]);

或者

$("#savedQuery option").prop("selected", false);

或者

$("#savedQuery option:selected").prop("selected", false) ; 

或者

$("#savedQuery").find('option').removeAttr("selected");

所以你的功能将是这样的

function saveQuery(ptr){
   var queryName;
   var $queryName = $('#savedQuery option:selected').val()
   $("#query").val($queryName);
   $("#savedQuery").val([]);
}