<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>

<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>

<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>

<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>