PHP display and hide data with php jquery ajax

Question

I have products table:

id int
name varchar(100)

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.

Mohit Tanwani · Accepted Answer · 2016-08-01 09:33:33Z

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

BenM · Accepted Answer · 2016-08-01 09:31:53Z

0

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

answered Aug 1, 2016 at 9:31

BenM

4,2682 gold badges34 silver badges58 bronze badges

Comments

shilpi Singh · Accepted Answer · 2016-08-01 09:40:19Z

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>

Collectives™ on Stack Overflow

PHP display and hide data with php jquery ajax

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related