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

<form action="#">
    <p><input type="button" value="都道府県プルダウン生成" onclick="fCreateElement()" /></p>
    <div id="resCreateElement"></div>
</form>

<script type="text/javascript">
function fCreateElement(){
    var todofuken={
        "0" : "---------",
        "hokkaido" : "北海道",
        "honsyu"   : "本州",
        "sikoku"   : "四国",
        "kyusyu"   : "九州",
        "okinawa"  : "沖縄"
    };
    /* 親ノード */
    var parentObj=document.getElementById("resCreateElement");
    /* 既に生成されている場合はなにもしない */
    if(document.getElementById("todofuken")!=undefined) return false;
    /* SELECT要素生成 */
    var selObj=document.createElement("SELECT");
    /* SELECT要素にid属性を設定 */
    selObj.setAttribute("id","todofuken");
    /* 親ノードの子ノードリストにSELECT要素を追加 */
    selObj=parentObj.appendChild(selObj);
    for(var i in todofuken){
        /* OPTION要素生成 */
        var optObj=document.createElement("OPTION");
        /* OPTION要素にvalue属性を設定 */
        optObj.setAttribute("value",i);
        /* OPTION要素にテキストノード追加 */
        optObj.appendChild(document.createTextNode(todofuken[i]));
        /* SELECT要素の子ノードリストにOPTION要素を追加 */
        selObj.appendChild(optObj);
    }
}
</script>