<form action="#">
<p>
【追加】<input type="button" value="末尾にアイテム追加" onclick="fAddItemDOM2()" /><br>
【削除】<input type="button" value="選択したアイテムを削除(複数選択可)" onclick="fRemoveItemSelectedIndexDOM2()" />
</p>
<p>
<select id="selY2" multiple="multiple" 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>
<p id="redAddRemove2"></p>
</form>
<script type="text/javascript">
/* プルダウンにアイテム追加 */
function fAddItemDOM2(){
var sObj=document.getElementById("selY2");
var oObj=document.createElement("option");
var sLen=sObj.length;
oObj.text="追加アイテム"+sLen;
try{
sObj.add(oObj,null);
}catch(e){
/* IE */
sObj.add(oObj);
}
}
/* 選択したアイテムを削除 */
function fRemoveItemSelectedIndexDOM2(){
var s="";
var sObj=document.getElementById("selY2");
var idx=new Array();
/* 選択されているアイテムのインデックス番号を配列に格納 */
for(var i=0,j=0; i<sObj.length; i++){
if(sObj[i].selected){
idx[j]=i;
j++;
}
}
if(j>0){
for(var i=0; i<idx.length; i++){
/*
削除するとインデックス番号が1つ減るので
格納したインデックス番号から削除したアイテム数を引く
*/
sObj.remove(idx[i]-i);
}
s+="";
}else{
s+="<span class='caution'>※削除するアイテムが選択されていないか、削除するアイテムがありません。<\/span>";
}
document.getElementById("redAddRemove2").innerHTML=s;
}
</script>