Display div based upon datalist selection

Question

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>

Are there any errors in the console? You don' thave any elements with id="#div", so this line will fail: var mydiv = document.getElementById('#div');. You'll need to use the input's value to determine which div is mydiv and change its display, but you'll probably also want to hide the remaining div. — mykaf
– mykaf, Commented Jun 23, 2022 at 13:40
You need to get var mydiv = document.getElementById('#' + this.value) and do the toggle of the rest, as mentioned by @user1599011, by creating a loop. — Rene van der Lende
– Rene van der Lende, Commented Jun 23, 2022 at 13:51
Arrghh, of course you need to var mydiv = document.getElementById(this.value). Nice catch prince of the forest! — Rene van der Lende
– Rene van der Lende, Commented Jun 23, 2022 at 14:33

Aneeb · Accepted Answer · 2022-06-23 13:59:42Z

1

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>

answered Jun 23, 2022 at 13:59

Aneeb

8391 gold badge7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cédric · Accepted Answer · 2022-06-23 14:26:59Z

1

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

edited Jun 23, 2022 at 14:26

answered Jun 23, 2022 at 14:09

Cédric

2,6593 gold badges14 silver badges33 bronze badges

Collectives™ on Stack Overflow

Display div based upon datalist selection

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related