使用JavaScript進行實時計算

Question

我正在使用引導程序構建站點，並且需要基於從兩個不同的選擇列表中選擇的選項來顯示計算結果。 顯示的價格取決於列表1中的區域和列表2中所選擇的區域。 因此，例如，列表一具有區域列表，列表二具有用於乘客數量的列表。 價格由地區決定，然后由乘客數量決定。 因此，如果我選擇Blacktown，那么2將會推動價格。 如果我選擇了Mt Druitt和2，那么價格應該是不同的，等等。第二部分是我需要在要添加禁用屬性的字段中顯示價格，以便客戶不要在該字段中輸入任何內容。 希望這是有道理的。 這是清單等的片段：

  <div class="row"> <div class="col-md-7"> <img class="img-responsive img-hover" src="img/blacktown.jpg" alt="Blacktown Councils"> </div> <div class="col-md-5"> <h3 id = "blacktown_councils" class = "aHeading">Blacktown Councils</h3> <p>Blacktown City is a local government area in western Sydney, situated on the Cumberland Plain, approximately 35 kilometres west of the Sydney central business district, in the state of New South Wales, Australia.</p>&nbsp; <div class = "row"> <div class = "form-group"> <label class="col-md-1 control-label" for="blacktownArea">Area:</label> <div class="col-md-5"> <select class = "form-control pull-right chosen-select-deselect" id = "blacktownArea" name = "blacktownArea" data-placeholder = "Select Area" style = "border-radius: 15px;"> <option value = ""></option> <option value = "Acacia Ridge">Acacia Gardens</option> <option value = "Arndell Park">Arndell Park</option> <option value = "Bidwell">Bidwell</option> <option value = "Blackett">Blackett</option> <option value = "Blacktown">Blacktown</option> <option value = "Bungarribee">Bungarribee</option> <option value = "Colebee">Colebee</option> <option value = "Dean Park">Dean Park</option> <option value = "Dharruk">Dharruk</option> <option value = "Doonside">Doonside</option> <option value = "Eastern Creek">Eastern Creek</option> <option value = "Emerton">Emerton</option> <option value = "Glendenning">Glendenning</option> <option value = "Glenwood">Glenwood</option> <option value = "Hassal Grove">Hassal Grove</option> <option value = "Hebersham">Hebersham</option> <option value = "Huntingwood">Huntingwood</option> <option value = "Arndell Park">Arndell Park</option> <option value = "Kellyville Ridge">Kellyville Ridge</option> <option value = "Kings Langley">Kings Langley</option> <option value = "Kings Park">Kings Park</option> <option value = "Lalor Park">Lalor Park</option> <option value = "Lethbridge Park">Lethbridge Park</option> <option value = "Marsden Park">Marsden Park</option> <option value = "Maryong">Maryong</option> <option value = "Minchinbury">Minchinbury</option> <option value = "Mt Druitt">Mt Druitt</option> <option value = "Oakhurst">Oakhurst</option> <option value = "Parklea">Parklea</option> <option value = "Plumpton">Plumpton</option> <option value = "Prospect">Prospect</option> <option value = "Quakers Hill">Quakers Hill</option> <option value = "Riverstone">Riverstone</option> <option value = "Schofields">Schofields</option> <option value = "Seven Hills">Seven Hills</option> <option value = "Shalvey">Shalvey</option> <option value = "Shanes Park">Shanes Park</option> <option value = "Stanhope Gardens">Stanhope Gardens</option> <option value = "The Ponds">The Ponds</option> <option value = "Toongabbie">Toongabbie</option> <option value = "Tregear">Tregear</option> <option value = "Vineyard">Vineyard</option> <option value = "Whalan">Whalan</option> <option value = "Willmot">Willmot</option> <option value = "Woodcroft">Woodcroft</option> </select>&nbsp; </div> <label class="col-md-2 control-label" for="blactownPax">Passengers:</label> <div class="col-md-3"> <select class="form-control pull-right chosen-select-deselect" id="blacktownPax" name = "blacktownPax" data-placeholder = "Pax" required= "" style = "border-radius: 15px;"> <option value = ""></option> <option value = "1">1</option> <option value = "2">2</option> <option value = "3">3</option> <option value = "4">4</option> <option value = "5">5</option> <option value = "6">6</option> <option value = "7">7</option> <option value = "8">8</option> <option value = "9">9</option> <option value = "10">10</option> <option value = "11">11</option> <option value = "12">12</option> <option value = "13">13</option> <option value = "14">14</option> <option value = "15">15</option> <option value = "16">16</option> <option value = "17">17</option> <option value = "18">18</option> <option value = "19">19</option> <option value = "20">20</option> <option value = "21">21</option> <option value = "22">22</option> <option value = "23">23</option> <option value = "24">24</option> </select> </div> </div> </div> <div class = "row"> <label class="col-md-1 control-label" for="blacktownArea">Price:</label> <div class = "col-md-5"> <div class="input-group pull-right"> <span class="input-group-addon">$</span> <input id = "dollars" type="text" class="form-control" disabled aria-label="Amount (to the nearest dollar)" style = "background-color: #fafafa;"> <span class="input-group-addon">.00</span> </div>&nbsp; </div> <div class = "col-md-5"> <a class="btn btn-danger pull-right" href="portfolio-item.html">Book Now!</i></a> </div> </div> </div> </div> 

Answer 1

如果我說對了：您必須獲取值。 JS：

var val1 = document.getElementById('blacktownArea').value;

歸根結底，並使用以下內容將其設置為正確的div：

document.getElementById('dollars').value = your_calculation_results;

ps：只是一個直截了當的猜測，myabe在這周圍有些東西...

Answer 2

您可以使用以下代碼：

將此添加到您的腳本部分：

function calculate() {
var area = document.getElementById("blacktownArea").value;

var MultipleBy = 1;
switch (area) {
    case "Acacia Ridge":
        MultipleBy = 2;
        break;

}

var Pax = document.getElementById("blacktownPax").value;

var finalValue = (MultipleBy/1) * (Pax/1);
var yourInput = document.getElementById("dollars");
yourInput.value = finalValue;
}

將onchange =“ calculate（）”添加到您的Select和完成中。

您將必須為所有不同的地方構建交換機/案例方案，或者將選擇列表中的值替換為要相乘的數字或其他。

小提琴的例子

Answer 3

我不確定您的價格表，我認為該地區所有價格均為15（您可以根據需要進行更改）

現在，您可以在兩個選擇框上都使用onchange事件，並提取選定的值；

 <select class = "form-control pull-right chosen-select-deselect" id = "blacktownArea" name = "blacktownArea" data-placeholder = "Select Area" style = "border-radius: 15px;" onchange="myFunction()">

 <select class="form-control pull-right chosen-select-deselect" id="blacktownPax" name = "blacktownPax" data-placeholder = "Pax" required= "" style = "border-radius: 15px;" onchange="myFunction()">



<script>
          function myFunction(){
            var first=document.getElementById("blacktownArea");
            var second=document.getElementById("blacktownPax");
            var firstVal=first.options[first.selectedIndex].value;
            var secondVal=second.options[second.selectedIndex].value;

            var area=15;//you can change it according to the value of area in SecondVal
            if(firstVal!="" && secondVal!="")
            document.getElementById('dollars').value=area * secondVal;
          }
        </script>

柱塞