CODEWITHSUNDEEP
jqueryhtml
user1735120
user1735120

Reputation: 489

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

how do i choose a value in a <select> HTML markup to be processed by a JQUERY, when clicked or chosen the specified div will show, the rest of the divs will be hidden.

I've shown only 3, but there are 10 more choices.

<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
 }

Upvotes: 5

Views: 11065

Answers (8)

Sergio
Sergio

Reputation: 28837

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 in your divs / html so that they are hiding from the page load. 

div.food
{
  display:none;
}

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

Upvotes: 1

Debashis
Debashis

Reputation: 596

Try this:

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

Upvotes: 0

ram1
ram1

Reputation: 6470

Put a change handler on the select box and hide all food except for 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();
  }
});

Upvotes: 0

Royi Namir
Royi Namir

Reputation: 148524

Try this :

$("#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()


)});

p.s. I don't know if all those FOOD divs are hidden by default , but if they not so add this :

(by css)

div.food
{
  display:none;
}

(or by Js)

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

Upvotes: 4

Celestz
Celestz

Reputation: 311

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>

You can probably do something like this.

//Hide All Divs
$('div').hide();

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

Upvotes: 0

WebDude
WebDude

Reputation: 6215

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 it in action:

JSFiddle

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

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 Fiddle

Upvotes: 3

Jalpesh Patel
Jalpesh Patel

Reputation: 3188

<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 div hide because when user select element at that time 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 which show div when user select value from div

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

Let me know if you have any problem this is not tested script but i think this works

Upvotes: 0

Related Questions