Display div based upon datalist selection-CodePudding

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  id="div1">This is div1></div>
<div  id="div2">This is div2></div>

CodePudding user response：

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  id="div1">This is div1></div>
<div  id="div2">This is div2></div>

CodePudding user response：

If you have a selected element, remove .hidden to show it.

Else, search for the div that doesn't have .hidden and add back the class to hide it.

document.getElementById('example').addEventListener("change", () => {
  if(event.target.value){
    document.getElementById(event.target.value).classList.remove("hidden");
  }
  else{
    document.querySelector(".somediv:not(.hidden)").classList.add("hidden");
  }
});

.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  id="div1">This is div1</div>
<div  id="div2">This is div2</div>