Question

这是我的字段集代码。现在我想要你在＆＃34; Als een stage bedrijf ＆＃34;之间做出选择。或＆＃34; voor een project ＆＃34;。出现了我的div。在我的CSS中，我的div目前显示为：none，但它必须在显示中更改：当你在这两者之间做出选择时内联。

<fieldset>
            <legend>Ik wil mijn aanmelden:</legend>
            <input type="text" id="Ik wil mijn aanmelden voor:" list="keuzes">
                <datalist id="keuzes">
                    <option value="Als Stage bedrijf"  />
                    <option value="Voor een project" />
                    <!--De gebruiker kan kiezen tussen stage of project-->
                </datalist>
            </fieldset>

Answer 1

使用此HTML

<fieldset>
    <legend>Ik wil mijn aanmelden:</legend>
    <input type="text" id="keuzesinput" list="keuzes" />
    <datalist id="keuzes">
        <option value="Als Stage bedrijf"  />
        <option value="Voor een project" />
        <!--De gebruiker kan kiezen tussen stage of project-->
    </datalist>
</fieldset>

<div id="mydiv">my div</div>

此JavaScript代码段可以显示div#mydiv。

var myinput = document.getElementById('keuzesinput');
myinput.addEventListener("change", function() {
    var mydiv = document.getElementById('mydiv');
    mydiv.style.display = 'inline';
});

当input的文本发生更改时，触发了change事件并更改了div的样式。

Here是一个jsfiddle，div隐藏或显示文本框是否有一些文本。

我更改了您输入的ID，因为它无效，因为它包含空格和:字符。

在数据列表中做出选择后，如何显示div？

1 个答案: