javascript - PHP使用php jquery ajax显示和隐藏数据

Question

我有产品表:

• id 整数
• 名称 varchar(100)

当我选择一个选项时，我想显示相应的内容。例如:

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

选择 product1 时显示 content1。

选择 product2 时显示 content2。

等等。

Answer 1

您可以尝试使用 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>

请注意，产品值应与内容 div 的 id 值匹配。像值为 1 的产品将与 id 为 content1 的内容 div 匹配，依此类推