<form name="frmX" action="#">
<p>
【追加】<br>
<input type="button" value="末尾にアイテム追加" onclick="fAddItem()" />
</p>
<p>
【削除】<br>
<input type="button" value="選択したアイテムを削除" onclick="fDeleteItemSelectedIndex()" />
<input type="button" value="先頭からアイテム削除" onclick="fDeleteItem('first')" />
<input type="button" value="末尾からアイテム削除" onclick="fDeleteItem('last')" />
</p>
<p>
<select name="selX" 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 fAddItem(){
var sObj=document.forms["frmX"].elements["selX"];
var idx=sObj.length;
sObj.options[idx]=new Option("テキスト"+idx, "値"+idx);
}
/* プルダウンからアイテム削除 */
function fDeleteItem(flag){
var sObj=document.forms["frmX"].elements["selX"];
var sLen=sObj.length;
if(sLen>0){
if(flag=="first"){
sObj.options[0]=null;
}else{
sObj.options[sLen-1]=null;
}
}else{
alert("削除するアイテムがありません");
}
}
/* 選択したアイテムを削除 */
function fDeleteItemSelectedIndex(){
var sObj=document.forms["frmX"].elements["selX"];
var idx=sObj.selectedIndex;
if(idx==-1){
alert("アイテムが選択されていないか、削除するアイテムがありません");
}else{
sObj.options[idx]=null;
}
}
</script>