<form name="frmX2" action="#">
<p>
【追加】<input type="button" value="末尾にアイテム追加" onclick="fAddItem2()" /><br>
【削除】<input type="button" value="選択したアイテムを削除" onclick="fDeleteItemSelectedIndex2()" />(複数選択可)
</p>
<p>
<select name="selX2" multiple size="10" style="width:200px;">
<option value="0">アイテム0</option>
<option value="1">アイテム1</option>
<option value="2">アイテム2</option>
<option value="3">アイテム3</option>
</select>
</p>
</form>
<script type="text/javascript">
/* プルダウンにアイテム追加 */
function fAddItem2(){
var sObj=document.forms["frmX2"].elements["selX2"];
var idx=sObj.length;
sObj.options[idx]=new Option("テキスト"+idx, "値"+idx);
}
/* 選択したアイテムを削除 */
function fDeleteItemSelectedIndex2(){
var sObj=document.forms["frmX2"].elements["selX2"];
var idx=new Array();
for(var i=0,j=0; i<sObj.length; i++){
if(sObj.options[i].selected==true){
idx[j]=i;
j++;
}
}
if(j>0){
for(var i=0; i<idx.length; i++){
/*
削除するとインデックス番号が1つ減るので
格納したインデックス番号から削除したアイテム数を引く
*/
sObj.options[idx[i]-i]=null;
}
}else{
alert("アイテムが選択されていないか、削除するアイテムがありません");
}
}
</script>