AJAXのお勉強

JavaScript セレクトボックに項目を追加＠AJAX

JavaScriptでセレクトボックスに項目を追加します。

document.getElementByIdでセレクトボックスのオブジェクトを取得します。

lengthのサイズを増やします。
optionsのvalue、textに値をセットします。

以下では、ボタンとセレクトボックスを設けます。
ボタンを押したら、セレクトボックスの項目を追加します。


<html>
<head>
<title>JavaScript セレクトボックに項目を追加</title>
<script type="text/javascript">
<!--

//各種ダイアログを表示
function createSelectBox() {

    var selectbox = document.getElementById("selectbox")
    
    var i = 1;
    
    //サイズを増やして、項目追加
    i++;
    selectbox.length = i;
    selectbox.options[i-1].value = "AAA";
    selectbox.options[i-1].text = "AAA";

    i++;
    selectbox.length = i;
    selectbox.options[i-1].value = "BBB";
    selectbox.options[i-1].text = "BBB";


    i++;
    selectbox.length = i;
    selectbox.options[i-1].value = "CCC";
    selectbox.options[i-1].text = "CCC";
}

// -->
</script>
</head>
<body>

<input type="button" value="ボタン" onclick="javascript:createSelectBox()">

<select id="selectbox" name="selectbox">
    <option>値を選んでください</option>
</select>

</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.