Making a div appear based on selection-CodePudding

First of all I have never really played with Javascript before, asides finding stuff that you clever types have created and then adding it to my sites.

I would like to show a div based on which option is selected in a drop down on the page.

I have Tariffs 1 - 4, the Tariff selected shows as t1, t2, t3 and t4 but the Divs are then not becoming visible.

I have tested the show / hide function of the div bit with a simple button and that worked, I just can't seem to make it pick up the variable to show the one which is selected.

<div>
                                Value Selected: <span id="current"></span>
                                <br>
                                <br>
                                <select id="select" name="options">
    <option>Choose Your Option</option>
    <option value="t1"> 1</option>
    <option value="t2"> 2</option>
    <option value="t3"> 3</option>
    <option value="t4"> 4</option>
</select>   
                            <div class="t1"><p>Tariff 1</p></div>
                            <div class="t2"><p>Tariff 2</p></div>
                            <div class="t3"><p>Tariff 3</p></div>
                            <div class="t4"><p>Tariff 4</p></div>
                        </div>

function showSelectedItem() {
    var item = document.getElementById("select").value;
   document.getElementById("current").innerHTML = item;
    
    if (item.style.display === 'none') {
    item.style.display = 'block';
  } else {
    item.style.display = 'none';
  }
    
}

document.getElementById("select").addEventListener("change", showSelectedItem);

then the css for all the t1, t2... divs is

.t1 {display: none}

Thanks in advance, I suspect its something very obvious when you know what you are looking at.

CodePudding user response：

This is my solution here

1.) Add t-content class to you t1 - t4. This is easily to hide them in javascript later on.

.t-content {
    display: none
}

<div class="t1 t-content"><p>Tariff 1</p></div>
<div class="t2 t-content"><p>Tariff 2</p></div>
<div class="t3 t-content"><p>Tariff 3</p></div>
<div class="t4 t-content"><p>Tariff 4</p></div>

2.) Slight modify your javascript code

 function showSelectedItem() {
    var item = document.getElementById("select").value;

    document.getElementById("current").innerHTML = item;

    // Select our target
    var selected_div = document.getElementsByClassName(item)[0];

    // Make all t-content hide first
    var t_content = document.getElementsByClassName('t-content');
    
    for (var i = 0; i < t_content.length; i  ) {
        t_content[i].style.display = 'none';
    }

    // Display our target div
    selected_div.style.display = 'block';
}

CodePudding user response：

Youe css styles wont be avaliable with item.style.display. Only the inline styles will be available with the above selector.

Logic

Make all nodes hidden initially with style="display:none" in HTML
On change, check the selected value.
Hide all nodes with class name which is not same as selected value.

function showSelectedItem() {
  var item = document.getElementById("select").value;
  document.getElementById("current").innerHTML = item;
  const classes = ['t1', 't2', 't3', 't4'];
  // Toggle visibility;
  classes.forEach((classNode) => {
    document.querySelector(`.${classNode}`).style.display = classNode === item ? 'block': 'none';
  });
}
document.getElementById("select").addEventListener("change", showSelectedItem);

<div>
  Value Selected: <span id="current"></span>
  <br>
  <br>
  <select id="select" name="options">
    <option>Choose Your Option</option>
    <option value="t1"> 1</option>
    <option value="t2"> 2</option>
    <option value="t3"> 3</option>
    <option value="t4"> 4</option>
  </select>
  <div class="t1" style="display: none;">
    <p>Tariff 1</p>
  </div>
  <div class="t2" style="display: none;">
    <p>Tariff 2</p>
  </div>
  <div class="t3" style="display: none;">
    <p>Tariff 3</p>
  </div>
  <div class="t4" style="display: none;">
    <p>Tariff 4</p>
  </div>
</div>

If you want the css styles also to be reflfced with your script, you have to make use of Window.getComputedStyle() Reference

function showSelectedItem() {
  var item = document.getElementById("select").value;
  document.getElementById("current").innerHTML = item;
  const selectedNode = document.querySelector(`.${item}`);
  if (selectedNode) {
    const displayValue = window.getComputedStyle(selectedNode).display;
    const classes = ['t1', 't2', 't3', 't4'];
    classes.forEach((classNode) => {
      document.querySelector(`.${classNode}`).style.display = classNode === item ? 'block': 'none';
    });
  }
}
document.getElementById("select").addEventListener("change", showSelectedItem);

.t1, .t2, .t3, .t4 {
  display: none;
}

<div>
  Value Selected: <span id="current"></span>
  <br>
  <br>
  <select id="select" name="options">
    <option>Choose Your Option</option>
    <option value="t1"> 1</option>
    <option value="t2"> 2</option>
    <option value="t3"> 3</option>
    <option value="t4"> 4</option>
  </select>
  <div class="t1">
    <p>Tariff 1</p>
  </div>
  <div class="t2">
    <p>Tariff 2</p>
  </div>
  <div class="t3">
    <p>Tariff 3</p>
  </div>
  <div class="t4">
    <p>Tariff 4</p>
  </div>
</div>

CodePudding user response：

You need to compare display property of div instead of value of dropdown.

var item = document.getElementById("select").value;
var dv = document.querySelector("." item);
document.getElementById("current").innerHTML = item;

if (dv.style.display === 'none') {
    dv.style.display = 'block';
} else {
    dv.style.display = 'none';
}

https://jsfiddle.net/palak6041/9wj07ebv/17/

This will not hide other divs though you need to hide it with additional code

below example will hide other div, only selected div will be visible

https://jsfiddle.net/palak6041/9wj07ebv/25/