CODEWITHSUNDEEP
javascriptjquery
korosaki zaki
korosaki zaki

Reputation: 31

PHP display and hide data with php jquery ajax

I have products table:

When I choose an option I would like to display the corresponding content. For example: 

<select class="form-control" name="name" required= "required" id="name">
    <option>Product1</option>
    <option>Product2</option>
    <option>Product3</option>
    <option>Product4</option>
</select>
<div id="content1">content1</div>
<div id="content2">content2</div>
<div id="content3">content3</div>
<div id="content4">content4</div>

Display content1 when product1 chosen.

Display content2 when product2 chosen.

And so on.

Upvotes: 0

Views: 70

Answers (3)

shilpi Singh
shilpi Singh

Reputation: 402

you can done it by different different scenario..via ajax or simply via jquery/javascript

via jquery/javascript

<select class="form-control" name="name" required= "required" id="name">
   <option value=''>select product</option>
   <option value='1'>Product1</option>
   <option value='2'>Product2</option>
   <option value='3'>Product3</option>
   <option value='4'>Product4</option>
</select>
<div id ="content1" class="content">content1</div>
<div id ="content2" class="content">content2</div>
<div id ="content3" class="content">content3</div>
<div id ="content4" class="content">content4</div>
<script>
 $('#name').change(function(){
   var value=$(this).val();
   $('.content').hide()
   $('#content'+value).show();
 });
</script>
<style>
.content{display:none;}
</style>

Upvotes: 0

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

You can try following code with jquery

$(document).ready(function(){
  $('#name').change(function(){
    $('.content').hide();
    $('#content'+$(this).val()).show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="name" required= "required" id="name">
  <option value="1">Product1</option>
  <option value="2">Product2</option>
  <option value="3">Product3</option>
  <option value="4">Product4</option>
</select>
<div id ="content1" class="content">content1</div>
<div id ="content2" class="content">content2</div>
<div id ="content3" class="content">content3</div>
<div id ="content4" class="content">content4</div>
Please keep note that the product value should be matched with id value of content div. Like product with value 1 will matched with content div with id content1, so on

Upvotes: 1

BenM
BenM

Reputation: 4278

I would suggest you look into using a data binding framework like Angular to do this with a fair amount of ease.

Here is a link to a solution which addresses the problem you are trying to solve.

https://docs.angularjs.org/api/ng/directive/select

Upvotes: 0

Related Questions