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

実行結果

ソース

<form action="#">
    <p>
        <select id="multi2" size="3" multiple="multiple">
            <option value="値A">テキストA</option>
            <option value="値B">テキストB</option>
            <option value="値C">テキストC</option>
        </select>
    </p>
    <p><input type="button" value="取得" onclick="fGetMSelectDOM()" /></p>
</form>
<p id="resGetMSelectDOM"></p>

<script type="text/javascript">
    function fGetMSelectDOM(){
        var s="";
        var idx=new Array();
        var sObj=document.getElementById("multi2");
        for(var i=0, n=0; i<sObj.length; i++){
            if(sObj[i].selected){ idx[n++]=i; }
        }
        if(idx.length>0){
            /* 選択されたインデックス番号 */
            s+="選択されたインデックス番号 = "+idx+"<br \/>";
            /* 選択数 */
            s+="選択された数 = "+idx.length+"<br \/>";
            /* 選択されたテキスト */
            for(var i=0; i<sObj.length; i++){
                s+="選択されたテキスト = "+sObj[i].text+"<br \/>";
            }
            document.getElementById("resGetMSelectDOM").innerHTML=s;
        }else{
            document.getElementById("resGetMSelectDOM").innerHTML="<span class='caution'>※選択してください<\/span>";
        }
    }
</script>

polarized women