change select box value live on change on different select box

Question

I am stuck at a point on my project where I need to change the values of the select/dropdown box on change of the value of the first select/dropdown box. The values are to be extracted from database.

Database example:

Table: clicks_package

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

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

Now what I want is I want to change the Clicks Required select box values when the Clicks Package is changed depending on the package ID in table clicks pricing. For example, if user selects Standard from the select box Clicks Package the Clicks Required select box will display values of cp_id 2 and 3 as the cp_package has inherited the id 1 from the clicks_package table. I want this to be changed LIVE using jQuery. I tried my best to explain the question. Please help.

Answer 1

1) Create one class clicks_package in First Dropdown which will be used in <script></script> to fetch dropdown values.

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

2) Create one class show_clicks_pricing in second <td> to show the result.

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

Updated Code

<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) Create one page namely ajaxData.php. (If you want to change this page name, change in <script></script> too. Both are related.)

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

you can achieve this by calling ajax request to the server and by sending id of clicks_package to the server and in response you have to return clicks_pricing of that package then by using jquery you can render it.

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