Change the Content of a Div Based on Selection from Dropdown Menu

Change the content of a div based on selection from dropdown menu

here is a jsfiddle with an example of showing/hiding div's via a select.

HTML:

<div id="option1" class="group">asdf</div>
<div id="option2" class="group">kljh</div>
<div id="option3" class="group">zxcv</div>
<div id="option4" class="group">qwerty</div>
<select id="selectMe">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>

jQuery:

$(document).ready(function () {
  $('.group').hide();
  $('#option1').show();
  $('#selectMe').change(function () {
    $('.group').hide();
    $('#'+$(this).val()).show();
  })
});

Change the content of a div based on selection from a list

Try adding an event listener to listen to clicks on the unordered list element.

var states = document.getElementById('states');var main = document.getElementById('main');
states.addEventListener('click', function(e) {  e.preventDefault(); // don't navigate to <a> tag href  if (e.target.tagName === 'A') {    main.textContent = e.target.textContent;  }});

<ul id="states">  <li><a href="#">Alabama</a></li>  <li><a href="#">Alaska</a></li>  <li><a href="#">Arizona</a></li>  <li><a href="#">Arkansas</a></li>  <li><a href="#">California</a></li></ul>

<div id="main">Main</div>

How to change content in div, based on dropdown selection

You need to bind change event on your dropdown & based upon selection, fire an ajax request to get related content & then upon receiving update content inside DIV.

If you are using jQuery, Some useful functions would be:

Ajax: http://api.jquery.com/jquery.ajax/

Binding event: https://api.jquery.com/change/

A good example of implementation has been given here:
https://stackoverflow.com/a/4910803/2004910

Show div based on selected dropdown value

Here is a solution without any external libraries.

It works by attaching an event listener for the change event on the <select> element and then hiding all the <div>s and showing only the selected one.

const select = document.getElementById('select');
select.addEventListener('change', function () {    for (let otherDiv of document.querySelectorAll('#default div')) {        otherDiv.style.display = 'none';    }        const div = document.getElementById(this.value);    div.style.display = 'block';});

<div id="default">  <div id="a">Random1</div>  <div id="b">Random2</div>  <div id="c">Random3</div>  <div id="d">Random4</div></div>
<select id="select">  <option value="" selected="selected">Default</option>  <option value="a">first</option>  <option value="b">second</option>  <option value="c">third</option>  <option value="d">fourth</option></select>

javascript change div based on dropdown

Well, the question is pretty vague but in general you would do something like this:

Html:

<select id="mySelect" name="list" size="1">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
</select>
<span id="tag"></span>

Javascript:

//cache the select and span elements
var mySelect = document.getElementById("mySelect"),
    tag = document.getElementById("tag");

//when it changes
mySelect.onchange = function() {
       //change the tag innerHTML checking the selected value of the select
       tag.innerHTML = mySelect.value === "1" ? "some text" : "some other text";
}

You could change the ternary operator (? :) for a few if statements, if you need more conditions.

Notice that I've added an Id to the <select>. You can avoid the caching part if you want to get the span each time the select changes for some reason

Want to show/hide div based on dropdown box selection

Wrap the code within $(document).ready(function(){...........}); handler , also remove the ; after if

$(document).ready(function(){
    $('#purpose').on('change', function() {
      if ( this.value == '1')
      //.....................^.......
      {
        $("#business").show();
      }
      else
      {
        $("#business").hide();
      }
    });
});

Fiddle Demo

How to hide and show content based on drop down selection

Not possible with CSS alone as you need to handle the change event of the drop down and take appropriate action.

You can do it easily via pure JS:

document.getElementById('id-of-select').onchange = function() {
    var i = 1;
    var myDiv = document.getElementById(i);
    while(myDiv) {
        myDiv.style.display = 'none';
        myDiv = document.getElementById(++i);
    }
    document.getElementById(this.value).style.display = 'block';
};

Demo: http://jsfiddle.net/2ukyA/

---

Update: If IDs of the DIVs are like "divname1" etc..

document.getElementById('id-of-select').onchange = function() {
    var i = 1;
    var myDiv = document.getElementById("divname" + i);
    while(myDiv) {
        myDiv.style.display = 'none';
        myDiv = document.getElementById("divname" + ++i);
    }
    document.getElementById(this.value).style.display = 'block';
};

Change Div Class depending on value in select option

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');
  }

});

Change all div content on selecting option from dropdown

This is because you are using ID, if you want to run in multiple places, use Class

Working Demo

Code

$(function () {
  $('.pr-price').hide();
  $('.d2').show();

  $('#select').on("change",function () {
    $('.pr-price').hide();
    $('.d'+$(this).val()).show();
  }).val("2");
});

HTML

<div class="pr-price d1">$100</div>
<div class="pr-price d2">£200</div>
<div class="pr-price d3">Rs300</div>
<div class="pr-price d4">D400</div>

---

Related Topics