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

オプションを段階的に反復することにより、オプションが削除されるとすぐに、削除されたオプションの後のオプションのインデックスが 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) 1 つ
  • 2) 2
  • 3) 3
  • 4) 4
  • 5) 5
  • 6) 6

番号 2 を削除すると、残りの項目は新しいインデックスを取得します。

  • 1) 1 つ
  • 2) 3
  • 3) 4
  • 4) 5
  • 5) 6

次に3番を削除すると、実際にヒットします：

  • 1) 1 つ
  • 2) 3
  • 3) 5
  • 4) 6

これを回避するための非常に簡単なトリックがあります: 逆の順序で削除します: この例 (2 から 4 を削除) では、最初に 4 を削除します:

  • 1) 1 つ
  • 2) 2
  • 3) 3
  • 4) 4
  • 5) 5
  • 6) 6

4 つを削除した後、4 より大きいインデックスのみが変更され、それらは重要ではありません。

  • 1) 1 つ
  • 2) 2
  • 3) 3
  • 4) 5
  • 5) 6

これで、次の 3 つを削除できます。

  • 1) 1 つ
  • 2) 2
  • 3) 5
  • 4) 6

プログラミング用語では、これは for ループを回すことを意味します。

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

http://jsfiddle.net/bjelline/XQH54/を参照してください

ps ご覧のとおり、ループを変更して、本当に必要なインデックスのみに触れるようにしました。

于 2013-01-19T08:12:34.903 に答える