用PHP的jQuery阿賈克斯PHP顯示和隱藏數據

Question

我有產品表：

• id INT
• name 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> 

顯示content1時product1選擇。

顯示content2當選擇product2。

依此類推。

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內容1內容的div匹配，等等

Answer 2

我建議你看看使用像Angular這樣的數據綁定框架來做到這一點，相當容易。

下面是一個解決方案的鏈接，它解決了您正在嘗試解決的問題。

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

Answer 3

您可以通過不同的不同scenario..via AJAX做它或者通過通過jQuery/JavaScript的

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