korosaki zaki korosaki zaki - 2 months ago 7
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">
<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.


You can try following code with jquery

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