在不同的選擇框上更改選擇框值

Question

我被困在我的項目中的一個點，需要更改第一個選擇/下拉框的值更改時的選擇/下拉框的值。這些值將從數據庫中提取。

數據庫例如：

表：clicks_package

cpack_id cpack_name cpack_timer 
1   Standard   30 
2   Mini    20 
3   Micro    10 

表：clicks_pricing

cp_id cp_clicks cp_amount cp_package (cpack_id from table clicks package) 
1  1000   30    2 
2  500   20    1 
3  1500   10    1 
4  1500   10    2 

CODE

<tr> 
      <th class="left-align">Clicks Package</th> 
      <td class="left-align" colspan="2"><select name="quantity" class="select-field" required> 
       <option value=""></option> 
       <?php while($f = $pacq->fetch()){ extract($f); ?> 
       <option value="<?php echo $cpack_id; ?>"><?php echo $cpack_timer; ?> secs (<?php echo $cpack_name; ?>)</option> 
       <?php } ?> 
       </select> // mistake in value rectified from value="<?php echo $cp_id; ?> to value="<?php echo $cpack_id; ?> 
      </td> 
      </tr> 
      <tr> 
      <th class="left-align">Clicks Required</th> 
      <td class="left-align" colspan="2"><select name="quantity" class="select-field" required> 
       <option value=""></option> 
       <?php while($f = $cq->fetch()){ extract($f); ?> 
       <option value="<?php echo $cp_package; ?>"><?php echo $cp_clicks; ?> clicks for $<?php echo number_format($cp_amount,2,'.',','); ?></option> 
       <?php } ?> 
       </select> // mistake in value rectified from value="<?php echo $cp_id; ?> to value="<?php echo $cp_package; ?> 
      </td> 
      </tr> 

現在，我要的是我想改變Clicks Required當Clicks Package根據表格點擊定價中的包裝ID進行更改時的選擇框值。例如，如果用戶從選擇框Clicks Package中選擇Standard，則Clicks Required選擇框將顯示值爲cp_id 2和3，因爲cp_package已從clicks_package表中繼承了id 1。我希望使用jQuery將其更改爲LIVE。我盡力解釋這個問題。請幫忙。

Answer 1

1）在第一個下拉這將在<script></script>用於提取下拉值創建一個clicks_package類。

<select name="quantity" class="select-field clicks_package" required>

2）在第二<td>創建show_clicks_pricing一個類來顯示結果。

<td class="left-align show_clicks_pricing" colspan="2">

更新的代碼

<tr> 
    <th class="left-align">Clicks Package</th> 
    <td class="left-align" colspan="2"> 
    <select name="quantity" class="select-field clicks_package" required> 
     <option value=""></option> 
     <?php while ($f = $pacq->fetch()) { 
     extract($f); ?> 
     <option value="<?php echo $cp_id; ?>"> 
      <?php echo $cpack_timer; ?> secs (<?php echo $cpack_name; ?>) 
     </option> 
     <?php } ?> 
     </select> 
    </td> 
</tr> 
<tr> 
    <th class="left-align">Clicks Required</th> 
    <td class="left-align show_clicks_pricing" colspan="2"> 
    <select name="quantity" class="select-field" required> 
     <option value=""></option> 
     <?php while ($f = $cq->fetch()) { 
     extract($f); ?> 
     <option value="<?php echo $cp_id; ?>"> 
      <?php echo $cp_clicks; ?> clicks for $<?php echo number_format($cp_amount, 2, '.', ','); ?> 
     </option> 
     <?php } ?> 
    </select> 
    </td> 
</tr> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$('.clicks_package').on('change',function(){ 
    var cpack_id = $(this).val(); 
    $.ajax({ 
     type:'POST', 
     url:'ajaxData.php', 
     data:{cpack_id:cpack_id}, 
     cache:false, 
     success:function(data){ 
     $('.show_clicks_pricing').html(data); 
     } 
    }); 
}); 
</script> 

3）創建一個頁面即ajaxData.php。 （如果你想在<script></script>更改此頁面的名字，也跟着改變，兩者是相關的。）

ajaxData.php

<?php 
$cpack_id = $_POST['cpack_id']; 

Now write query here using this `$cpack_id`. And fetch it like the same way you were fetching before. 

?> 
<select name="quantity" class="select-field" required> 
    <option value=""></option> 
    <?php while ($f = $cq->fetch()) { 
    extract($f); ?> 
    <option value="<?php echo $cp_id; ?>"> 
     <?php echo $cp_clicks; ?> clicks for $<?php echo number_format($cp_amount, 2, '.', ','); ?> 
    </option> 
    <?php } ?> 
</select> 

Answer 2

您可以通過調用服務器的ajax請求並向服務器發送clicks_package的id來實現此目的，並且作爲響應，您必須返回該包的clicks_pricing，然後使用jquery來渲染它。

$.ajax({url: "getdata.php",data:{"id":"1"} success: function(result){ 
//you have to use loop here for result and set 
var html=""; 
$.each(data.data, function(k, v) { 
html+="<option value=\'"+v.cp_id+"\'>"+v.cp_amount+"</option>"; 
}); 
    $("#clicks_pricing_id").html(html); 
}});