javascript - 从下拉列表中获取值并返回到表单字段

Question

我试图从两个表单字段中获取值，然后获取他们的产品并将其传递给另一个表单字段。我正在从数据库中获取数据，然后将其传递给下拉列表。 但是我遇到了麻烦。如何使用 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>

Answer 1

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

您还需要从所有 标签中删除 id="fee"。默认情况下，选择的值是其选择的选项的值。