3

我有一个包含 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>

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

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

在这里，我附上了小提琴。

4

4 回答 4

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/

于 2013-01-19T08:08:58.910 回答
1

一个更简单的例子：从 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) 六个

删除四个后，只有高于四个的索引发生了变化，它们对我们来说无关紧要：

  • 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/

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

于 2013-01-19T08:12:34.903 回答
0

也许有点晚了，但我遇到了同样的问题。这是我的解决方案。感谢@steveukx，您的解释帮助了我！

function remove(el) {
    for(var i=el.length-1;i>=0;i--) {
        if(el[i].selected)
            el.remove(i);
    }
};
于 2015-06-18T21:39:27.143 回答
0

嗨，我遇到了同样的问题。我正在粘贴我的解决方案。在 fubbe 回答中，如果用户尝试先发送更高的索引然后再发送更低的索引，那么这些是一些问题..因此我正在处理传递的参数以确保索引（通过参数接收）首先按升序排序，然后我们的循环将在逆序删除索引。

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

于 2015-11-16T07:18:46.743 回答