Search code examples
javascripthtmljquerycssdatalist

Display div based upon datalist selection


This has probably been asked about before, but after several hours of looking I can't seem to find anything.

I have a datalist which is meant to display a div based on your selection of the datalist. Whatever I do, I can't seem to find out how to do it. The best I can get to work is have both selections display one of the divs, but not have spesific divs display based on the selection.

How do I make it so choosing div1 display div1, div2 displays div2 and so on?

var myinput = document.getElementById('example');
myinput.addEventListener("change", function() {
    var mydiv = document.getElementById('#div');
    mydiv.style.display = (this.value === '' ? 'none' : 'inline');
});
    
.hidden {
display: none;
}
<fieldset>
    <legend>This is a datalist</legend>
    <input type="text" id="example" list="brow" />
    <datalist id="brow">
        <option value="div1"  />
        <option value="div2" />
    </datalist>
</fieldset>

<div class="hidden" id="div1">This is div1></div>
<div class="hidden" id="div2">This is div2></div>


Solution

  • your script will be like this.

    var myinput = document.getElementById('example');
    var divs = document.querySelectorAll('.hidden');
    myinput.addEventListener('change', function() {
        var mydiv = document.getElementById(this.value);
        divs.forEach(div => {
          div.style.display = div.id === this.value ? 'block' : 'none';
        });
    });
    .hidden {
      display: none;
    }
    <fieldset>
        <legend>This is a datalist</legend>
        <input type="text" id="example" list="brow" />
        <datalist id="brow">
            <option value="div1"  />
            <option value="div2" />
        </datalist>
    </fieldset>
    
    <div class="hidden" id="div1">This is div1></div>
    <div class="hidden" id="div2">This is div2></div>