Javascript 从下拉列表中获取值并返回表单字段

我试图从两个表单字段中获取值，然后获取它们的产品并将其传递给另一个表单字段。我从数据库中获取数据，然后将其下拉传递。 但我遇到了麻烦。如何使用JavaScript从下拉列表中获取所选值？然后把它传给其他领域和一些操作？我试过下面的方法，但不起作用。我的作品就在下面。有谁能给我指点一下吗

<form class="form-horizontal" role="form" method="post">

  <div class="form-group">

      Months to rent 
     <div class="count-input space-bottom">
        <a class="incr-btn" data-action="decrease" href="#">+</a>
        <input onchange="calculate()" id="month" class="quantity " 
         type="text" name="quantity" value="1"/>
        <a class="incr-btn" data-action="increase" href="#"><i class="far 
         fa-plus-square"></i></i></a>
    </div>
  </div>
  <div class="form-group">
    <label for="s2id_autogen1" class="col-sm-2 control-label">
    Select Room                        </label>
    <div class="col-sm-6">
        <select name="room_id" id="fee" class="form-control select2 select2- 
         offscreen" ">
            <?php
                include("connection.php");
                $id = $_GET['id'];
                $sql = "SELECT * FROM room  ";
                $result = $conn->query($sql);
                if ($result->num_rows > 0) 
                {
                 while($row = $result->fetch_assoc())
                  {
             ?>
              <!--   Fee is an int value and description is room name -->

        <option id="fee" onchange="calculate()" value="<?php echo 
         $row['Fee']; ?>"><?php echo $row['Description']; ?></option>

             <?php  
                 } 
                }
              ?>

        </select >
     </div>
    <span class="col-sm-4 control-label"> </span>
 </div>
 <div class="form-group">
   Balance                
    <div class="col-sm-6">
        <input type="text" id="result" class="form-control" 
           name="checkin_date" >
    </div>
    <span class="col-sm-4 control-label">
    </span>
  </div>
    <div class="col-sm-offset-2 col-sm-8">
    <input type="submit" class="btn btn-info" value="Add member">
    </div>
  </div>

月租金
选择房间
">
平衡

Javascript:

 <script>


    function calculate() {
        var myvar1 = document.getElementById('month').value; 
        var myvar2 = document.getElementById('fee').value;
        var result = document.getElementById('result'); 
        var myResult = myvar1 * myvar2;
       document.getElementByid('result').value = myResult;

    }
 </script>

函数计算（）{
var myvar1=document.getElementById（'month'）。值；
var myvar2=document.getElementById（'fee'）。值；
var result=document.getElementById（'result'）；
var myResult=myvar1*myvar2；
document.getElementByid（'result'）。value=myResult；
}

您的Javascript变量都错了

您将myvar设置两次，然后将其设置为myBox1*myBox2，这是从未设置过的

我想你要找的是：

<script>
  function calculate() {
    var month_input = document.getElementById('month').value; 
    var fee_input = document.getElementById('fee').value;
    var result = month_input * fee_input;
    document.getElementById('result').value = myResult;
  }
</script>

函数计算（）{
var month_input=document.getElementById（'month'）。值；
var fee_input=document.getElementById（'fee'）。值；
var结果=月份输入*费用输入；
document.getElementById（'result'）。value=myResult；
}

---

您还需要从所有标记中删除id=“fee”。默认情况下，select的值是其所选选项的值。

尝试像这样获取所选选项的值。运行代码段以查看结果

函数计算（）{
var month_input=document.getElementById（'month'）。值；
var select_fee=document.getElementById（'fee'）；
var费用输入=选择费用。选项[选择费用。选择指数]。值
var结果=月份输入*费用输入；
document.getElementById（'result'）。value=result；
}

标签{
显示：内联块；
宽度：70px；
}
输入{
填充：6px 14px；
}
.表格组{
填充：8px；
}

月份：
费用：
选择1
选择2
选择3
结果:

提示：在一个页面中，您不应该多次使用同名ID。ID是唯一的。谢谢Kumar。您还可以告诉我如何计算默认下拉选择的结果吗？您只需在页面加载后调用

calculate（）

。