首页 > $('option:selected',this)的用法?

$('option:selected',this)的用法?

新手,在写一个demo,写到最后一个功能,就是双击左边或右边的select框中option时,相应的option就会被转移到对面的select框中。初始化左边的select框有option,右边的是空的

原来我想的是,分别把两个select框中的option选中,添加dbl事件,用$(this)获得当前的元素,再进行转移的操作。代码如下:

 $demo4.find('#channel option').dblclick(function(){
       $(this).remove().appendTo($demo4.find('#rselect'))});
 $demo4.find('#rselect option').dblclick(function(){
       $(this).remove().appendTo($demo4.find('#channel'))});

检验发现,左边的select框中的option可以顺利转移到右边的select框中,但是,双击右边select框中的option却没有反应。下面是教程上的代码,可以正确达到效果。

$demo4.find('#channel').dblclick(function(){
   $('option:selected',this).remove().appendTo($demo4.find('#rselect'))});
 $demo4.find('#rselect').dblclick(function(){
   $('option:selected',this).remove().appendTo($demo4.find('#channel'))})`

想问大家,为什我我自己写的这种思路会出现问题呢,本人新手一枚,第一次提问,希望大家能指出我的问题。
另一个就是$('option:selected',this)这个第二个参数带this的选择器是什么意思?


注意两段代码绑定dbclick的位置的不同。
题主的代码

$demo4.find('#channel option')

教程的代码

$demo4.find('#channel')

题主的代码把事件绑定在选项中,而且一开始右边的选框中没有选项,所以第二条事件绑定语句并没有绑定到任何option上,所有的选项都绑定了双击移动到右边的事件。
左边选框中的选项双击时会移动到右边,这时再双右边的选项,因为绑定的还是之前的把选项移到右边事件,但选项已经在右边了,所以不会有反应。

而教程的代码是把双击事件绑定在选框中,当选框发生双击事件时,找到当前选框中选中的option,将它们移到另一边。$('option:selected',this)表示从当前dom元素(发生点击事件的选框及其子元素)集中查找选中的option,和$(this).find('option:selected')效果是一样的。

【热门文章】
【热门文章】