korosaki zaki korosaki zaki - 4 months ago 8
Javascript Question

PHP display and hide data with php jquery ajax

I have table product :


  • id: int,

  • name:varchar(100),



I would like when I want choose an option I would like to display the 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>



  • When I would choose product 1 would like to display content 1.

  • And when i would choose product 2 would like to display content 2.

  • And when i would choose product 3 would like to display content 3.


Answer

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