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>

现在我想要的是，根据表单击定价中的包ID更改Clicks Required时，我想更改Clicks Package选择框值。例如，如果用户从选择框Standard中选择Clicks Package，Clicks Required选择框将显示cp_id 2和3的值，因为cp_package已继承来自clicks_package表的id 1。我希望使用jQuery将其更改为LIVE。我尽力解释这个问题。请帮忙。

Answer 1

1）在First Dropdown中创建一个类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>

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

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

2 个答案: