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

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

代码

<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 Package 根据表点击定价中的包 ID 更改时，我想更改 Clicks Required 选择框的值。例如，如果用户从选择框 Clicks Package 中选择 Standard，则 Clicks Required 选择框将显示 cp_id 2 和 3，因为 cp_package 从 clicks_package 表中继承了 id 1。我希望使用 jQuery 实时更改它。我尽力解释了这个问题。请帮忙。

Answer 1

1) 创建一个类clicks_package在将在 <script></script> 中使用的第一个下拉列表中获取下拉值。

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

2) 创建一个类show_clicks_pricing第二名<td>显示结果。

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