选择option remove()方法来删除多个选项

select option remove() method on removing multiple options

本文关键字：删除 选项 方法 option remove 选择      更新时间：2023-09-26

我有一个包含17个值/选项的选择框。

<select id="_class" name="_class">
    <option value="0"></option>
    <option value="1">PREKG</option>
    <option value="2">LKG</option>
    <option value="3">UKG</option>
    <option value="4">I</option>
    <option value="5">II</option>
    <option value="6">III</option>
    <option value="7">IV</option>
    <option value="8">V</option>
    <option value="9">VI</option>
    <option value="10">VII</option>
    <option value="11">VIII</option>
    <option value="12">IX</option>
    <option value="13">X</option>
    <option value="14">XI</option>
    <option value="15">XII</option>
    <option value="16">XIII</option>                              
</select>

现在，我正试图将选项从5删除到8。为此，我使用以下JavaScript代码:

<script type="text/javascript">
 var _class = document.getElementById("_class");
 for(var i=1; i < _class.length;i++) {
   if(i>=5 && i<=8) {
     _class.remove(i);
   }
 }
</script>

但是，我没有得到预期的结果，因为每次if for循环运行时，选项的顺序都会发生变化。

我怎样才能得到想要的结果?

这里我已经附上了提琴

通过增量迭代选项，当一个选项被删除后，该选项后面的索引将在该选项被删除时减少1(即:在索引5处删除该选项导致选项6及以上现在被索引为选项5及以上)。

为了解决这个问题，将循环的顺序颠倒为向下计数:

var _class = document.getElementById("_class");
for(var i=Math.min(_class.options.length, 8); i >= 5; i--) {
  _class.remove(i);
}
http://jsfiddle.net/Gy8j8/2/

一个更简单的例子:删除6个数字中的2到4:在这个列表中，数字代表数组中的INDEX:

  • 1)
  • 2)两个
  • 3)三
  • 4)四
  • 5)五
  • 6)六

现在如果我删除第2项，剩下的项得到一个新的索引:

  • 1)
  • 2)三
  • 3)四
  • 4)五
  • 5)六

如果我接下来删除第3个，我实际上点击了:

  • 1)
  • 2)三
  • 3)五
  • 4)六
有一个非常简单的技巧可以避免这种情况:以倒序删除:在这个例子中(将2删除到4)，我们先删除4:
  • 1)
  • 2)两个
  • 3)三
  • 4)四
  • 5)五
  • 6)六

删除4后，只有高于4的索引发生变化，和它们对我们不重要:

  • 1)
  • 2)两个
  • 3)三
  • 4)五
  • 5)六

现在我们可以删除三个:

  • 1)
  • 2)两个
  • 3)五
  • 4)六

在编程术语中，这意味着把for循环转过来:

 for(var i=8; i >= 5;i--) {
    _class.remove(i);
 }

见http://jsfiddle.net/bjelline/XQH54/

注。如您所见，我还将循环更改为仅触摸我们真正需要的索引

可能有点晚了，但我有同样的问题。这是我的解决方案。谢谢@steveukx，你的解释帮助了我!

function remove(el) {
    for(var i=el.length-1;i>=0;i--) {
        if(el[i].selected)
            el.remove(i);
    }
};

嗨，我也遇到过同样的问题。我在粘贴溶液。简而言之，如果用户试图先发送高索引，然后发送低索引，这是一些问题。因此，我对传递的参数进行排序，以确保索引(通过参数接收)首先按升序排序，然后我们的循环将按反向顺序删除索引。

HTMLSelectElement.prototype.removeIndexes = removeIndexes;
function removeIndexes(){
  var res = Array.prototype.slice.call(arguments).sort(function(a, b){return     a-b})
  alert(res)
  for (var i=res.length-1;i>=0;i--){
     (function(self,indx){
      self.remove(indx);  
     })(this,res[i])
  }
}
var x = document.getElementById("mySelect");
x.removeIndexes(2,3)
 //------- Another way----------------
 HTMLSelectElement.prototype.removeIndexes = removeIndexes;
 function removeIndexes(){
   var self = this;
   var res = Array.prototype.slice.call(arguments).sort(function(a, b)     {return b-a}).map(function(indx){
   alert(indx)
   self.remove(indx);
 })

 }
 var x = document.getElementById("mySelect");
 x.removeIndexes(2,0,1)

希望有帮助

亲切的问候Gaurav Khurana

相关文章：