显示图像的组合框

时间:2016-02-11 10:59:07

标签: javascript image combobox

我正在尝试制作一个下拉组合框,根据性别和年龄显示不同的图像和文字。我对文本没有任何问题,但我不知道如何显示图像。 这是我正在使用的脚本:

function byId(e) {
        return document.getElementById(e);
    }

    function genderComboChange() {
        var combo1 = byId('genderCombo');
        var combo2 = byId('ageCombo');

        emptyCombo(combo2);
        switch (combo1.value) {
        case '-1':
            addOption(combo2, -1, 'Age');
            break;
        case '0':
            addOption(combo2, -1, 'Age', '');
            addOption(combo2, 0, '0-3 yr', '700 mg');
            addOption(combo2, 1, '4-8 yr', '1.000 mg');
            addOption(combo2, 2, '9-18 yr', '1.300 mg');
            addOption(combo2, 3, '19-50 yr', '1.000 mg');
            addOption(combo2, 4, '51-70 yr', '1.000 mg');
            addOption(combo2, 5, '70+ yr', '1.200 mg');
            break;
        case '1':
            addOption(combo2, -1, 'Age', '');
            addOption(combo2, 0, '0-3 yr', '700 mg');
            addOption(combo2, 1, '4-8 yr', '1.000 mg');
            addOption(combo2, 2, '9-18 yr', '1.300 mg');
            addOption(combo2, 3, '19-50 yr', '1.000 mg');
            addOption(combo2, 4, '51-70 yr', '1.200 mg');
            addOption(combo2, 5, '70+ yr', '1.200 mg');
            break;
        case '2':
            addOption(combo2, -1, 'Age', '');
            addOption(combo2, 0, '14-18 yr', '1.300 mg');
            addOption(combo2, 1, '19-50 yr', '1.000 mg');
            break;
        }
        ageComboChange();
    }

    function ageComboChange() {
        var combo2, tgt;
        combo2 = byId('ageCombo');
        tgt = byId('tgt');
        tgt.innerHTML = combo2.options[combo2.options.selectedIndex].title;

    }

    function emptyCombo(e) {
        e.innerHTML = '';
    }

    function addOption(combo, val, txt, disp) {
        var option = document.createElement('option');
        option.value = val;
        option.title = disp;
        option.appendChild(document.createTextNode(txt));
        combo.appendChild(option);
    }

这是JSFiddle:https://jsfiddle.net/nadiaeagle/s7u0q631/2/

1 个答案:

答案 0 :(得分:0)

你需要使用一个框架,比如AngularJS https://angularjs.org/