【jQuery】セレクトボックスの項目を削除したのち、残りの項目をアラートするサンプル

プログラミング



こんな感じで、セレクトボックスの項目を削除したら
残りの項目がアラートで表示されるコードです。


キモは、『option:eq(0)』のようにして残りの項目の文字列を
順番に取得していく箇所です。


【サンプルページ】
http://www.usamimi.info/~sutara/sample/select_delete.php



<!doctype html>

<html lang="ja">

    <head>

        <meta charset="UTF-8">

        <script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>

        <script type="text/javascript">

            function delItem(){

                $('#items option:selected').remove();

                var itemLength = $('#items').children().length;

                var str = '';

                for (var i = 0; i < itemLength; i++) {

                    var item = $('#items option:eq(' + i + ')').text();

                    str += i + ' : ' + item + '\n';

                }

                alert(str);

            }

        </script>

    </head>

    <body>

        <select id="items" size="8">

            <option value="0">Item0</option>

            <option value="1">Item1</option>

            <option value="2">Item2</option>

            <option value="3">Item3</option>

            <option value="4">Item4</option>

            <option value="5">Item5</option>

        </select>

        <button id="del_item" onclick="delItem();">[−]</button>

    </body>

</html>