Javascript 当下拉选择值将被更改时，如何编写函数，并使用js和html在输入字段中查看值？

我有一个使用html和css的表单，我有一个下拉列表。在下拉菜单中，我可以选择早餐、午餐和晚餐。。。 我想要的是，当我点击早餐时，下一个输入字段作为名称成本，在该输入字段中，我将得到早餐的成本，就像我点击午餐和晚餐时一样，我将得到成本

下面的代码是html代码：

<div class="form-grid">
                          
 <input class="inputs" type="text" name="celname" id="celname" placeholder="Person Name*">
<input class="inputs" type="text" name="celnumber" id="celnumber" placeholder="Phone number*" >
<select class="selects " id="foodtype" name="foodtype" onchange="getcostvalue();">                                    <option value=""> --Food Donation-- </option>
 <option value="Breakfast">Breakfast</option>
<option value="Lunch-Veg">Lunch-Veg</option>
<option value="Lunch-Non_Veg">Lunch-Non_Veg</option>
<option value="Dinner-Veg">Dinner-Veg</option>
<option value="Dinner-Non_Veg">Dinner-Non_Veg</option>
                                </select> 
                            
                                
<input class="inputs" type="text" name="cost" id="cost" placeholder="Cost*">
<input class="inputs" type="text" name="celltotal" id="celltotal" placeholder="Total Rupees*"> 
<input type="hidden" class="inputs" type="text" name="cellstatus" id="cellstatus" value="C" placeholder="Total Rupees*"
       </div>         
                           
  <button type="submit" class="btn btn-primary btn-style mt-3" id="submitbtn" >Submit</button>
                      

这是我在javascript onchange函数中尝试的代码

<script type="text/javascript">
  function getcostvalue(){
    var foodtype = $.trim($('#foodtype').val());
    if (foodtype=='Breakfast') {
      document.getElementById("cost").value = "50";

    }else if(foodtype=='Lunch-Veg'){
      document.getElementById("cost").value = "100";
    }else if(foodtype=='Lunch-Non_Veg'){
      document.getElementById("cost").value = "150";
    }
  }
</script>

在select中，我编写了onchange函数

请帮助使用javascript编写该函数代码

示例：如果选择“早餐”，则成本将在成本输入字段中显示为50。 如果我选择午餐蔬菜，费用是100美元 如果我选择午餐-非素食成本是150

就像晚餐费用和午餐费用一样

函数getcostvalue{ 常量数据=[ {钥匙：早餐，价值：50}， {键：午餐蔬菜，值：100}， {键：午餐非素食，值：150}， {键：晚餐蔬菜，值：200}， {键：晚餐-非素食，值：250}， ]; 让select=document.getElementById'foodtype' 让[selectedObj]=data.filtere=>e.key==select.value； 如果选择了bj{ document.getElementById'cost'.value=selectedObj.value； } 否则{ document.getElementById'cost'.value=null； } } -食物捐赠- 早餐 午餐蔬菜 午餐非素食 晚餐蔬菜 晚餐-非素食 通过使用HTML5，您可以以语法有效的方式向元素添加额外的数据，而jQuery也可以轻松访问这些数据

$'foodtype'.changefunction{ var selected=$this.find'option:selected'； var价格=所选。数据“价格”； $‘成本’。价格； }; -食物捐赠- 早餐 午餐蔬菜 午餐非素食 晚餐蔬菜 晚餐-非素食

---

你也可以发布你的javascript函数吗？getcostvalue；是的，实际上我是用php codeigniter开发的，可能会给出一些提示