Javascript 更改选择框值在更改不同的选择框时生效

在我的项目中，当第一个选择/下拉框的值发生变化时，我需要改变选择/下拉框的值。这些值将从数据库中提取

数据库示例：

表：U包

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

表：点击率和价格

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

代码

---

现在我想要的是，当Clicks包根据表Clicks pricing中的包ID更改时，我想要更改Clicks Required select box的值。例如，如果用户从选择框Clicks Package中选择Standard，则Clicks Required选择框将显示cp_id 2和3的值，因为cp_Package从Clicks_Package表继承了id 1。我希望使用jQuery实时更改此内容。我尽力解释这个问题。请提供帮助。

您可以通过向服务器调用ajax请求并向服务器发送clicks\u包的id来实现这一点，作为响应，您必须返回该包的clicks\u定价，然后使用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);
}});

1在第一个下拉列表中创建一个类clicks_package，它将用于获取下拉列表值

2创建一个类show\u在第二个类中单击\u pricing以显示结果

更新代码

3创建一个页面，即ajaxData.php。如果要更改此页面名称，请同时更改。两者都是相关的

ajaxData.php

---

尝试使用$document.on'change'，'input'，函数{var id=$this.val；//根据所选id调用获取点击次数的URL\u定价表数据}；通过AJAX可以做到@Shubham.bhaiya有一个错误。。刚刚纠正了它。。这里有评论，请看一下并重新修改你的代码。。这次我遇到了一个问题。。因为我必须匹配两个表，所以我需要匹配两个字段中的值。我已经纠正了这一点，但我希望选项value=而不是cpack\u id。。有什么方法可以到达那里吗？

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

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

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