CODEWITHSUNDEEP
javascriptjqueryhtml
bork121
bork121

Reputation: 113

Show/hide div for selected options

I have three dropdown select boxes. Each contains a different set of demographic attributes. I'd like to display a score corresponding to whatever combination of selections is made by a user. For example, if a user selects Male, 18-24, Asian-American, I want to hide the current div and display the div corresponding to that combination.

I have seen answers for how to do this with just one select box, but since I have three and there are significantly more combinations, I wanted to see if there was a simple way to do this efficiently. I can provide specific code if needed, though a general example of how to do this would be just fine as well - thanks!

Upvotes: 0

Views: 145

Answers (1)

Shyju
Shyju

Reputation: 218722

Keeping hidden divs for all possible combinations is not a good idea. That will make your page size bigger. Why don't you get only the relevant information as needed using ajax and show it ?

In your page, keep only one div to show the information

<select id="Age">
     <option value='1'>18-24</option>
     <option value='2'>25-50</option>
</select>
<select id="Place">
     <option value='1'>Asia</option>
     <option value='2'>America</option>
</select>
<div id="info"></div>

Now listen to the change event of the dropdowns, get the selected value of dropdowns and make an an ajax call to the server page and get the markup to show to user. In the below script, I am using jquery load method to load the new markup in the info div.

$(function(){

   $("#Age,#Place").change(function(e){
      var age=$("#Age").val();
      var place=$("#Place").val();
      $("#info").load("yourServerPage.php?age="+age+"&place="+place);

   });

});

Assuming you have a server page called yourServerPage.php which accepts the age and place from the querystring and return the markup for the information div.

Upvotes: 2

Related Questions