Create a conditional statement for <select> HTML markup in jQuery

Question

how to select a value in <select> HTML markup for JQUERY processing, when a clicked or chosen specified div is displayed, the rest of the delimiters will be hidden.

I showed only 3, but there are 10 more options.

 <select id="category"> <option value="" disabled="disabled" selected="selected">Please select a category</option> <option name="choice1" value="pie"> Pie </option> <option name="choice2" value="cake"> Cake </option> <option name="choice2" value="candy"> Candy </option> </select> 

Hidden Divs

 <div id="divPie" class="food"> <p> this is pie </p> </div> <div id="divCake" class="food"> <p> this is pie </p> </div> <div id="divCandy" class="food"> <p> this is pie </p> </div> 

goes something like this.

 if $('#category').val("pie"); { //then show divpie } else { //hide the other divs } 

Answer 1

Try the following:

 $("#category").on('change',function ( $("div.food").hide( ); var _lower=$(this).val(); var _value=_lower.charAt(0).toUpperCase() + _lower.slice(1); //just noticed that there is a uppercase char there... $("#div"+_value).show() )}); 

ps I don’t know if all these FOOD-div files are hidden by default, but if they don’t add:

(by css)

 div.food { display:none; } 

(or via Js)

  $("div.food").hide(); 

Answer 2

There you go

 $('#category').change(function () { // Get the value of the dropdown var value = this.value; // Convert the first char to uppercase value = value.substr(0,1).toUpperCase() + value.substr(1, value.length); // Hide all food divs $('.food').hide(); $('#div'+ value).show(); }); 

Check feed

Answer 3

You can use this:

 $('#category').on('change', function () { $('div.food').hide(); var val = $('#category option:selected').text(); console.log(val); $('#div' + val).show(); }); 

DEMO HERE

HTML

 <div id="divPie" class="food"> <p>this is pie</p> </div> <div id="divCake" class="food"> <p>this is cake</p> </div> <div id="divCandy" class="food"> <p>this is candy</p> </div> 

I added CSS to my divs / html so that they hide from page loading.

 div.food { display:none; } 

or through jQuery $('div.food').hide();

Answer 4

 <select id="category"> <option value="" disabled="disabled" selected="selected" onchange="hideshow(this)">Please select a category</option> <option name="choice1" value="divPie"> Pie </option> <option name="choice2" value="divCake"> Cake </option> <option name="choice2" value="divCake"> Candy </option> </select> 

All divs are hidden because when the user selects an element, at that time the div will display

 <div id="divPie" class="food" style="display:none"> <p> this is pie </p> </div> <div id="divCake" class="food" style="display:none"> <p> this is pie </p> </div> <div id="divCandy" class="food" style="display:none"> <p> this is pie </p> </div> 

This is javascript code that shows a div when a user selects a value from a div

 <script> function hideshow(divval) { $("#"+divval).show(); } </script> 

Let me know if you have any problems, this is not a verified script, but I think it works

Answer 5

HTML

 <select id="category"> <option value="" disabled="disabled" selected="selected">Please select a category</option> <option name="choice1" value="pie"> Pie </option> <option name="choice2" value="cake"> Cake </option> <option name="choice2" value="candy"> Candy </option> </select> <div id="divpie" class="food"> <p> this is pie </p> </div> <div id="divcake" class="food"> <p> this is cake </p> </div> <div id="divcandy" class="food"> <p> this is candy </p> </div> 

Js

 $(function(){ $(".food").hide(); $("#category").change(function(){ $(".food").hide(); $("#div" + $(this).val()).show(); }); }); 

See in action:

Jsfiddle

Answer 6

Place the change handler in the selection field and hide all food except the one selected:

 $('#category').change(function(){ switch ($(this).val()) { var div; case 'pie': div = 'divPie'; break; case 'cake': div = 'divCake'; break; case 'candy': div = 'divCandy'; break; $('.food').hide(); $(div).show(); } }); 

Answer 7

I assume you are looking for something like this.

 <select id='category'> <option value='test1'>Test 1</option> <option value='test2'>Test 2</option> </select> <div id='test1'> Content Here </div> <div id='test2'> Content Here </div> 

Perhaps you can do something like this.

 //Hide All Divs $('div').hide(); //Get the Currently Selected Item var selected = $('#category').val(); //Show the selected one. $('#'+selected).show(); 

Answer 8

Try the following:

HTML:

 <select id="category" onchange='display();'> <option value="" disabled="disabled" selected="selected">Please select a category</option> <option name="choice1" value="pie">Pie</option> <option name="choice2" value="cake">Cake</option> <option name="choice2" value="candy">Candy</option> </select> <div id="divPie" class="food" style="display:none;"> <p>this is pie</p> </div> <div id="divCake" class="food" style="display:none;"> <p>this is cake</p> </div> <div id="divCandy" class="food" style="display:none;"> <p>this is candy</p> </div> 

JQuery

 function display(){ var select=$('#category').val(); if(select!=''){ var divblock='div'+select; $(".food").hide(); $('#'+divblock).css('display','block'); } } 

You can also use $('#'+divblock).show(); instead of $('#'+divblock).css('display','block');