Question

我在jQuery中遇到了问题。我有一个下拉列表包含10个元素。现在点击复选框，我想删除前五个元素。

它也可以是这样的：我想从索引0中删除元素到索引5.怎么做？

Answer 1

这应该按照你的要求进行

$('#checkboxID').click(function(){
  $('#dropdownID > option:lt(5)').remove();
});

演示：http://jsfiddle.net/gaby/VBT42/

如果您想在选中复选框时隐藏它们，并在取消选中复选框时再次显示它们，请使用

$('#checkboxID').click(function(){
  $('#dropdownID > option:lt(5)').toggle();
});

演示：http://jsfiddle.net/gaby/VBT42/2/（虽然不适用于IE ）

对于普遍安全的删除/恢复，请使用.detach() ^docs方法并使用.data() ^docs方法存储对它们的引用

$('#checkboxID').click(function(){
  if (this.checked) {
       $('#dropdownID').data('removedOptions', $('#dropdownID > option:lt(5)').detach() );
  } else {
      var $dropdown = $('#dropdownID');
      $dropdown.prepend( $dropdown.data('removedOptions') );
  }
});

演示：http://jsfiddle.net/gaby/VBT42/4/

Answer 2

在复选框点击/更改处理程序中尝试这样的操作：

 $("#selectBox option:lt(5)").remove();

Answer 3

也许这可行，从不自己尝试过：

$("option").each(function(index) {
if(index < 5) $(this).remove();
});

Answer 4

无论如何添加

<select name="foo" id="myselect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
</select>
<input type="checkbox" id="mycheckbox" />

这是jQuery

$('#mycheckbox').change(function() {
    $("#myselect option:lt(5)").toggle();
    if( $('#myselect option:lt(5)').is(":hidden") ){
        $("#myselect option:eq(5)").attr('selected','selected');
    }else{
        $("#myselect option:eq(0)").attr('selected','selected');
    }
});

这是我的fiddle

Answer 5

$("options selector").each(function(i){if(i<5){$(this).remove();}});

从下拉列表中删除一定数量的元素

5 个答案: