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/