javascript - 選択したドロップダウン リストの値に基づいて動的チェック ボックスを作成する

Question

ドロップダウン リストから選択した値のテキストに基づいて、動的なチェックボックスを作成したいと考えています。

たとえば、ドロップダウン リストには次のように表示されます。

( test1, test2, test3)

したがって、選択test2すると、というチェックボックスが作成test2され、動的にチェックボックスが作成されます。

Answer 1

HTML

<div id="selectContainer">
    Step 1: 
    <select id="testSelect" name="test">
        <option></option>
        <option value="test1">Test 1</option>
        <option value="test2">Test 2</option>
        <option value="test3">Test 3</option>
    </select>
</div>
<div id="checkboxContainer"></div>​

JS

function callback(event) {
    var input     = document.createElement('input'),
        container = document.getElementById('checkboxContainer');

    if (!this.value &&  !event.srcElement.value) {
        return false;
    }

    input.type = 'checkbox';
    input.name = this.value || event.srcElement.value;

    container.innerHTML = '';
    container.appendChild(input);
}

try {
    // W3C
    document.getElementById('testSelect').addEventListener('change', callback);
} catch (e) {
    // Microsoft
    document.getElementById('testSelect').attachEvent('onchange', callback);
}

デモ: http://jsfiddle.net/VGAMR/