显示图像的组合框

Combo box which shows images

本文关键字:组合 图像 显示图 显示      更新时间:2023-09-26

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

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/

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