PHP & JavaScript Room :: 設置サンプル

<form name="frmN" action="#">
    <p>
        3番目のアイテム: 
        <input type="button" value="選択" onclick="fOptSelect(3,true)" />
        <input type="button" value="選択解除" onclick="fOptSelect(3,false)" />
    </p>
    <p>
        <select name="selN1">
            <option value="0">アイテム0</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
    </p>
    <p>
        アイテム: <input type="button" value="全選択" onclick="fOptSelectAll(true)" />
        <input type="button" value="全選択解除" onclick="fOptSelectAll(false)" />
    </p>
    <p>
        <select name="selN2" multiple>
            <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 fOptSelect(idx, bool){
        var sObj=document.forms["frmN"].elements["selN1"];
        sObj.options[idx].selected=bool;
    }
    /* 全アイテム選択・解除 */
    function fOptSelectAll(bool){
        var sObj=document.forms["frmN"].elements["selN2"];
        for(var i=0; i<sObj.length; i++){
            sObj.options[i].selected=bool;
        }
    }
</script>