selectObject.add( option )メソッド

selectObject.add( option )は、ドロップダウンリスト(select要素)の末尾に、「option」に指定した選択肢(option要素)を追加するメソッド。

構文

$selectElementReference.add( option );
option
追加する選択肢(option要素)を指定。

var $option = document.createElement( "option" );
$option.text = "追加選択肢";
$selectElementReference.add( $option ); // 末尾に追加

サンプル

ドロップダウンリスト:

サンプルの動作について

  • 「末尾に追加」ボタンをクリックすると、ドロップダウンリストの末尾に「追加選択肢」という選択肢を追加する。
  • 「先頭に追加」ボタンをクリックすると、ドロップダウンリストの先頭に「追加選択肢(0)」という選択肢を追加する。
  • 「5つ目に追加」ボタンをクリックすると、ドロップダウンリストの5つ目に「追加選択肢(4)」という選択肢を追加する。
  • 「先頭を削除」ボタンをクリックすると、ドロップダウンリストの先頭の選択肢を削除する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function addOption( $index ) {
    if( typeof( $index ) === 'undefined' ){
        var $elementReference = document.getElementById( "sample" );
        var $option = document.createElement( "option" );
        $option.text = "追加選択肢";
        $elementReference.add( $option );
    }else{
        var $elementReference = document.getElementById( "sample" );
        var $option = document.createElement( "option" );
        $option.text = "追加選択肢(" + $index + ")";
        $elementReference.add( $option, $index );
    }
}
function removeOption( $index ) {
    var $elementReference = document.getElementById( "sample" );
    $elementReference.remove( $index );
}
</script>

HTML

<p>
    <button onclick="addOption();">末尾に追加</button>
    <button onclick="addOption(0);">先頭に追加</button>
    <button onclick="addOption(4);">5つ目に追加</button>
</p>
<p>
    <button onclick="removeOption(0);">先頭を削除</button>
</p>
<p>
    ドロップダウンリスト:
    <select id="sample">
        <option value="選択肢1">選択肢1</option>
        <option value="選択肢2">選択肢2</option>
        <option value="選択肢3">選択肢3</option>
        <option value="選択肢4">選択肢4</option>
        <option value="選択肢5">選択肢5</option>
    </select>
</p>

スポンサード リンク

カテゴリー: DOM, JavaScript, Selectオブジェクト, リファレンス パーマリンク