<form action="#">
<p>
【追加】<br>
<input type="button" value="末尾にアイテム追加" onclick="fAddItemDOM()" />
</p>
<p>
【削除】<br>
<input type="button" value="選択したアイテムを削除" onclick="fRemoveItemSelectedIndexDOM()" />
<input type="button" value="先頭からアイテム削除" onclick="fRemoveItemDOM('first')" />
<input type="button" value="末尾からアイテム削除" onclick="fRemoveItemDOM('last')" />
</p>
<p>
<select id="selY" size="5" 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="redAddRemove"></p>
</form>
<script type="text/javascript">
/* プルダウンにアイテム追加 */
function fAddItemDOM(){
var sObj=document.getElementById("selY");
var oObj=document.createElement("option");
var sLen=sObj.length;
oObj.text="追加アイテム"+sLen;
try{
sObj.add(oObj,null);
}catch(e){
/* IE */
sObj.add(oObj);
}
}
/* プルダウンからアイテム削除 */
function fRemoveItemDOM(flag){
var s="";
var sObj=document.getElementById("selY");
var sLen=sObj.length;
if(sLen>0){
if(flag=="first"){
/* 先頭から削除 */
sObj.remove(0);
}else{
/* 末尾から削除 */
sObj.remove(sLen-1);
}
s+="";
}else{
s+="<span class='caution'>※削除するアイテムがありません。<\/span>";
}
document.getElementById("redAddRemove").innerHTML=s;
}
/* 選択したアイテムを削除 */
function fRemoveItemSelectedIndexDOM(){
var s="";
var sObj=document.getElementById("selY");
var idx=sObj.selectedIndex;
if(idx>=0){
sObj.remove(idx);
s+="";
}else{
s+="<span class='caution'>※削除するアイテムが選択されていないか、削除するアイテムがありません。<\/span>";
}
document.getElementById("redAddRemove").innerHTML=s;
}
</script>