selectObject.add( option, index )は、ドロップダウンリスト（select要素）の「index」に指定したインデックス番号の位置に、「option」に指定した選択肢（option要素）を追加するメソッド。
構文
$selectElementReference.add( option, index );
- option
- 追加する選択肢（option要素）を指定。
- index
- 選択肢（option要素）を追加する位置をインデックス番号で指定。
- 選択肢のインデックス番号は、「0」から始まる点に注意。
例
var $option = document.createElement( "option" );
$option.text = "追加選択肢";
$selectElementReference.add( $option, 0 ); // 先頭に追加
$selectElementReference.add( $option, 1 ); // ２つ目に追加
$selectElementReference.add( $option, 6 ); // ７つ目に追加
$option.text = "追加選択肢";
$selectElementReference.add( $option, 0 ); // 先頭に追加
$selectElementReference.add( $option, 1 ); // ２つ目に追加
$selectElementReference.add( $option, 6 ); // ７つ目に追加
サンプル
ドロップダウンリスト：
サンプルの動作について
- 「末尾に追加」ボタンをクリックすると、ドロップダウンリストの末尾に「追加選択肢」という選択肢を追加する。
- 「先頭に追加」ボタンをクリックすると、ドロップダウンリストの先頭に「追加選択肢（0）」という選択肢を追加する。
- 「５つ目に追加」ボタンをクリックすると、ドロップダウンリストの５つ目に「追加選択肢（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>
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);">５つ目に追加</button>
</p>
<p>
<button onclick="removeOption(0);">先頭を削除</button>
</p>
<p>
ドロップダウンリスト：
<select id="sample">
<option value="選択肢１">選択肢１</option>
<option value="選択肢２">選択肢２</option>
<option value="選択肢３">選択肢３</option>
<option value="選択肢４">選択肢４</option>
<option value="選択肢５">選択肢５</option>
</select>
</p>
<button onclick="addOption();">末尾に追加</button>
<button onclick="addOption(0);">先頭に追加</button>
<button onclick="addOption(4);">５つ目に追加</button>
</p>
<p>
<button onclick="removeOption(0);">先頭を削除</button>
</p>
<p>
ドロップダウンリスト：
<select id="sample">
<option value="選択肢１">選択肢１</option>
<option value="選択肢２">選択肢２</option>
<option value="選択肢３">選択肢３</option>
<option value="選択肢４">選択肢４</option>
<option value="選択肢５">選択肢５</option>
</select>
</p>