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