在不同的选择框上更改选择框值

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); 
}});