Change Div Class depending on value in select option

Question

I have a select dropdown with options and I want to display a certain div depending on the selection in the dropdown.

Technically, I believe the easiest way would be to set divs that shouldnt be visible just to display: none by applying the right css class.

However, I don't know how to create the respective JS/jQuery code. I have looked at other solutions here for the last half and hour but they were more unique to their problem, while I belive my solution could be very simple.

Could someone please help me?

Thank you very much!!

Best, David

$(document).ready(function () {
    $("#LooseTea").hide();
    $('#PyramidBags').show();
    $('#ProductSelect-product-template-option-0').change(function () {
        if($("#ProductSelect-product-template-option-0").val()=="Loose Tea")
        {
          $("#LooseTea").show();
          $("#PyramidBags").hide();
        }
        else
        {      
          $("#PyramidBags").show();
          $("#LooseTea").hide();
        }
    })
});

<select id="ProductSelect-product-template-option-0">
  <option value="Pyramid Bags">Praymid Bags</option>
  <option value="Loose Tea">Loose Tea</option>
</select>

<div class="">
  <p>This text is about the first product</p>
</div>

<div class="">
  <p>This textis about the second product</p>
</div>

Check out the accepted answer from this [Stack Overflow question](https://stackoverflow.com/questions/19491858/show-hide-toggle-the-display-of-divs-based-on-selection-using-javascript). The [JSFiddle demo](http://jsfiddle.net/crustyashish/NeNdR/) shows it in action. Hope it helps. — Mike Hermary, Jan 11 '20 at 18:44
I like the code, but is there a way to use it if I have spaces in my option values? It seems to always break the code — AlphaX, Jan 11 '20 at 20:03

Seth B · Answer 1 · 2020-01-11T21:02:34.223

Here ya go!

var product1 = document.getElementById("product1");
var product2 = document.getElementById("product2");
var productselection = document.getElementById("productselection");

productselection.addEventListener("change", function(){
  if(productselection.value === 'PyramidBags'){
    product1.classList.add('CLASS');
    if(product2.classList.contains('CLASS')){
      product2.classList.remove('CLASS');
    }
  }
  if(productselection.value === 'LooseTea'){
    product2.classList.add('CLASS');
    if(product1.classList.contains('CLASS')){
      product1.classList.remove('CLASS');
    }
  }
});

.CLASS{
  color:red
}

<select id="productselection">
  <option value="PyramidBags">Praymid Bags</option>
  <option value="LooseTea">Loose Tea</option>
</select>

<div id='product1' class="CLASS">
  <p>This text is about the first product</p>
</div>

<div id='product2' class="">
  <p>This text is about the second product</p>
</div>

Also, this might help How to change an element's class with JavaScript?

Response to OP's comment.

var product1 = document.getElementById("product1");
var product2 = document.getElementById("product2");
var productselection = document.getElementById("productselection");

productselection.addEventListener("change", function(){
    if(productselection.value == 'PyramidBags'){
        if(product1.style.display !== 'block'){
            product1.style.display = 'block';
            product2.style.display = 'none';
        }
    }
    if(productselection.value == 'LooseTea'){
        if(product2.style.display !== 'block'){
            product2.style.display = 'block';
            product1.style.display = 'none';
        }
    }
});

<select id="productselection">
  <option value="PyramidBags">Praymid Bags</option>
  <option value="LooseTea">Loose Tea</option>
</select>

<div id='product1'>
  <p>This text is about the first product</p>
</div>

<div id='product2' style='display:none'>
  <p>This text is about the second product</p>
</div>

Also, using jQuery makes everything easier.

Thank you very much Seth! How could I make this work with option values that have spaces (Pyramid Bags vs PyramidBags) and how could i change it with display none so that by default when option value 1 is selected only div1 is shown (and div2 hidden) and when selecting option value 2 div1 will then be hidden? — AlphaX, Jan 11 '20 at 20:30
@AlphaX see my answer if you don't want to rely on long matching text strings. — symlink, Jan 12 '20 at 00:24

Addis · Answer 2 · 2020-01-11T19:34:05.400

I believe it's better if you use a single div to display the texts according to the selected option. Store all your product messages in an array in the order the product is placed in the select element, and use the selectedIndex() method to get the index of the selected option, which in turn will be used to get the corresponding text in the array. In this way, if you have hundred products, you won't need hundred DOM elements just to display product information.

const selectElement = document.getElementById('productselection'); 
const divElement = document.getElementById('product'); 
const aboutProducts = ['This text is about product one', 'This text is about product two'];
function changeText() {
  let text = aboutProducts[selectElement.selectedIndex];
  divElement.innerHTML = text;
}

<select id="productselection" onchange="changeText()">
  <option value="PyramidBags">Praymid Bags</option>
  <option value="LooseTea">Loose Tea</option>
</select>

<div class="">
  <p id = 'product'>This text is about product one</p>
</div>

He said.. "I believe", so I assume he is searching for possible ways. The way you did it is one way and this is another. Let him choose what he wants. — Addis, Jan 11 '20 at 19:08
This would be rather complicated as the text in the div itself would be formatted again and include images etc. but thank you for thinking out of the box!! — AlphaX, Jan 11 '20 at 19:59

Ishwar Gagare · Accepted Answer · 2020-01-11T20:19:12.353

1

Add ids to the Div's for better understanding

<select id="productselection">
  <option value="Pyramid Bags">Praymid Bags</option>
  <option value="Loose Tea">Loose Tea</option>
</select>

<div id='product1' class="">
 <p>This text is about the first product</p>
</div>

<div id='product2' class="">
 <p>This text is about the second product</p>
</div>

Instead of doing that much code you can easily do like this

 $(document).ready(function () {
   $("#product2").hide();
  });

 $("#productselection").change(function() {
    if($('#PyramidBags').val()=='Pyramid Bags')
  { 

     $("#product1 p").css('color', 'red');
  }
   else
  { 
    $("#product2").show();
    $("#product2 p").css('color', 'green');
  }

});

edited Jan 11 '20 at 20:19

answered Jan 11 '20 at 19:08

Ishwar Gagare

723
3
9

If I see right though, the efault is that it doesnt show any text? I'd need by default the first Div to be shown. Also, I had one mistake in my code the option values are actually with a space, so it's "Pyramid Bags" and "Loose Tea". Is there a way to still use your code? I have updated my HTML code. – AlphaX Jan 11 '20 at 20:03
@AlphaX..you are saying you want to hide second div bydefault..and let me make some changes as per suggestion for working ti as per new requirement – Ishwar Gagare Jan 11 '20 at 20:07
@AlphaX,Now it will work with space between the option values – Ishwar Gagare Jan 11 '20 at 20:08
By default (when loading the page), the first div should be shown and the second hidden. When selecting in dropdown the second value the second div should be shown. Just like here: http://jsfiddle.net/crustyashish/NeNdR/ but I cannot use it because I have spaces in my option values. Thank you so much for your help Ishwar, truly appreciate it!! – AlphaX Jan 11 '20 at 20:15
@AlphaX..just changed the answer as per suggestion..try it and let me know if you want it differently – Ishwar Gagare Jan 11 '20 at 20:21
It doesn't work (just tested it in jsfiddle). Could you alternatively please help me to just amend the code in here http://jsfiddle.net/crustyashish/NeNdR/ so it works with option values that have spaces? This would be easiest for me. Thank so very much Ishwar! – AlphaX Jan 11 '20 at 20:27
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/205809/discussion-between-ishwar-gagare-and-alphax). – Ishwar Gagare Jan 11 '20 at 20:38

score 0 · Answer 4 · answered Jan 11 '20 at 19:13

document.getElementById("productselection").onchange = (e) => {
    let dataId = e.target.options[e.target.selectedIndex].dataset.id
    
    document.querySelectorAll(".txt").forEach(el => {
        el.style.display = el.dataset.id === dataId ? "block" : "none"
    })
}

.txt{display: none}

<select id="productselection" name="a">
  <option value="PyramidBags" data-id="pr-1">Pyramid Bags</option>
  <option value="LooseTea" data-id="pr-2">Loose Tea</option>
</select>

<div class="txt" data-id="pr-1">
  <p>This text is about the first product</p>
</div>

<div class="txt" data-id="pr-2">
  <p>This textis about the second product</p>
</div>

Change Div Class depending on value in select option

4 Answers4