Question

我尝试禁用select标签的点击功能，该功能完全正常，但重新启用不起作用。这是演示：http://jsfiddle.net/cs6Xb/103/ 我的代码如下：

HTML：

<select class="select-cities" name="city" id="optlist" multiple="multiple">
    <option>Frederiksberg</option>
    <option>Vanløse</option>
    <option>Glostrup</option>
    <option>Brøndby</option>
    <option>Roskilde</option>
    <option>Køge</option>
    <option>Gentofte</option>
    <option>Hillerød</option>
    <option>Tårnby</option>
    <option>Vallensbæk</option>
</select>

<br/>
<select class="chosen-cities" name="chosen-cities-name" id="optlist1" multiple="multiple"></select>

jQuery的：

$('.select-cities').click(function () {
   $('.select-cities option:selected').remove().appendTo('.chosen-cities');    
   if($('#optlist1 option').size() == 1) {
      $('.select-cities').off('click');  
   }
});

$('.chosen-cities').click(function () {
   $('.chosen-cities option:selected').remove().appendTo('.select-cities');   
   $('.select-cities').on('click');    
});

Answer 1

http://jsfiddle.net/CHBXp/5/

单击第一个选择时，如果第二个选择中只有一个项目，则只需添加另一个项目。该事件存在，但在第二个选择

中没有0个项目之前它不会执行任何操作

$('.select-cities').click(function () {
    if ($('#optlist1 option').size() == 1) {
        return false;
    }
    $('.select-cities option:selected').remove().appendTo('.chosen-cities');
});

$('.chosen-cities').click(function () {
    $('.chosen-cities option:selected').remove().appendTo('.select-cities');
});

EDIT 仅移除$(this)，选中该选项，而不是(option:selected)，因为在多选中，:selected选项可能是多个

$('.select-cities option').click(function () {
    if ($('#optlist1 option').size() == 1) {
        return false;
    }
    $(this).remove().appendTo('.chosen-cities');
});

$('.chosen-cities').click(function () {
    $('.chosen-cities option:selected').remove().appendTo('.select-cities');
});

Answer 2

一个非常好的想法是重置你的初始状态......想象你按照字母顺序排列你的城市.append()是不可取的，所以在这种情况下：

jsBin demo

function selectCity(){
  $('.select-cities').one("click", function () {
      var opt = $(":selected", this);
      $(".chosen-cities").append( opt.clone() );
      opt.hide();
  });
}

selectCity();


$('.chosen-cities').on("click", "option", function () {
     $(this).remove();
     $('.select-cities :selected').show();
     selectCity();
});

Answer 3

http://jsfiddle.net/cs6Xb/111/

function onSelecClick(){
   $('.select-cities option:selected').remove().appendTo('.chosen-cities');    
   if($('#optlist1 option').size() == 1) {
      $('.select-cities').off('click');  
   }
}
$('.select-cities').click(onSelecClick);

$('.chosen-cities').click(function () {
   $('.chosen-cities option:selected').remove().appendTo('.select-cities');   
   $('.select-cities').on('click',onSelecClick);    
});

顺便说一句，如果你多选，你可以一次添加多个项目。

Answer 4

尝试：

 var handler = function(e){
 $('.select-cities option:selected').remove().appendTo('.chosen-cities');

  if($('#optlist1 option').size() == 1) {
      $('.select-cities').off('click');

     }
  }    

 $('.select-cities').click(handler);

 $('.chosen-cities').click(function () {
    $('.chosen-cities option:selected').remove().appendTo('.select-cities');

    $('.select-cities').on('click',handler);    
 });

http://jsfiddle.net/MzG8K/

Answer 5

这是因为你没有在jQuery中使用动态内容的实时方法。使用on()方法。

$(document).on('click', '.select-cities', function () {
    $('.select-cities option:selected').remove().appendTo('.chosen-cities');
    if ($('#optlist1 option').size() == 1) {
        $('.select-cities').off('click');
    }
});

$(document).on('click', '.chosen-cities', function () {
    $('.chosen-cities option:selected').remove().appendTo('.select-cities');
    $('.select-cities').on('click');
});

DEMO

重新启用单击功能不起作用？

5 个答案: