0

first please excuse my english, I'm not a native speaker. I have a really weird problem. I have these two multiple select boxes:

<select id="leftEntities" class="width390px" multiple="multiple" size="8">
   <option value="1">Option A</option>
   <option value="2">Option B</option>
</select>

<select id="rightEntities" class="width390px" multiple="multiple" size="8">
   <option value="1">Option C</option>
   <option value="2">Option D</option>
</select>

and this button which should perform an invert of the selected options.

<button id="invert" class="btn btn-primary glyphicon glyphicon-transfer"></button>

This is the JQuery Code:

$(document).ready(function(){
   $('#invert').click(function() {
   SWAPLIST.invert($(this).parent().find('select'));
   });
});

var SWAPLIST = {};
SWAPLIST.invert = function(list) {
   $(list)
   .children()
   .prop('selected', function(i, selected) {
      return !selected;
   });
}

The problem is that this works like it should work, when there's no div container around the button, but if I put one around it, it does not work anymore.

In other words, this is what not works:

<div class="sometestclass">
   <button id="invert" class="btn btn-primary glyphicon glyphicon-transfer"></button>
</div>
4

5 回答 5

3

如果$(this).parent()不是选择的父级，则它将不起作用

试试这个

Live Demo

SWAPLIST.invert($("select.width390px"));

或者

SWAPLIST.invert($("select[id$='Entities']"));

完整的解决方案

$(function(){
  $('#invert').on("click",function() {
    SWAPLIST.invert($("select[id$='Entities']"));
  });
});
于 2013-09-16T11:56:22.000 回答
1

它发生是因为$(this).parent()指向 this DIV。使用$(this).parent().parent()或其他一些选择器。

于 2013-09-16T11:55:01.137 回答
1

这背后的问题是：你用过: $(this).parent()。在许多情况下，这不会计算出您想要的结果，因此会导致失败。

但是，最好使用select classes您在 html 中添加的标记，如下所示：

$(document).ready(function(){
   $('#invert').click(function() {
       console.log($("select.width390px"));
       //SWAPLIST.invert($(this).parent().find('select'));
       SWAPLIST.invert($("select.width390px"));
   });
});

在这里找到工作小提琴：http: //jsfiddle.net/2ceUC/1/

于 2013-09-16T12:10:39.120 回答
0

与$(this)您一起按下按钮。然后和parent()你一起去父母那里。然后find()，您正在寻找一些元素。

但是，如果div周围有button，则父级将是div。从那里开始，find将失败。

于 2013-09-16T11:55:15.543 回答
-1

试试 http://jsfiddle.net/5jb3P/

您现在不能选择父母作为父母<div>

所以你应该通过选择或元素的id来访问它

喜欢

$('select') or $('#leftEntities,#rightEntities')
于 2013-09-16T12:01:09.943 回答