更改选择框后获取数据

Question

我试图在更改选择框时从数据库中获取数据。我有5个具有特定ID country, state, city, hotel, food的选择框。当我尝试使用id="food"获取有关最后一个选择框的更改的数据时，但它不起作用。没有错误显示。我认为我的代码还可以，但是为什么会这样，我不知道。

这是JavaScript / Ajax代码

$('#food').on('change', function(){
        $('#costDiv').show();
        var country_id = $('#country').val();
        var state_id = $('#state').val();
        var city_id = $('#city').val();
        var hotel_id = $('#hotel').val();
        var food_id = $('#food').val();
        if(flag == "false"){
            $.ajax({
              url:"grandTotal.php",
              dataType:"json",
              method:"POST",
              data:{
                key:'calculate_cost',
                country_id:country_id,
                state_id:state_id,
                city_id:city_id,
                hotel_id:hotel_id,
                food_id:food_id,
                totalCostV:totalCostV,
                totalCostF:totalCostF
              },
              success:function(data){
                $('#costttt').append(data.cost);
                totalCostV = data.total_cost_v;
                totalCostF = data.total_cost_f;
                $('#totalcostV').html(totalCostV);
                $('#totalcostF').html(totalCostF);
              }
            });
          }
        });

在这里，我获取每个选择框的每个对应选择项的ID，并将它们与初始值为0的两个附加变量grandTotal.php和totalCostV发送到totalCostF。{{1 }}是表costttt的ID，我将返回的数据之一附加到tbody。

这是PHP代码：

costttt

以上示例显示了使用ajax代码发送的数据从我的数据库中获取数据。