我正在使用bootstrap构建一个站点，我需要根据从两个不同的选择列表中选择的选项显示计算。显示的价格取决于列表编号1中的区域和列表2中选择的编号。因此，例如，列表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>
<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>
</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>
</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>
答案 0 :(得分：0)
如果我抓住了这个权利： 你必须得到价值观。 JS：
var val1 = document.getElementById('blacktownArea').value;
然后计算完毕并设置为正确的div：
document.getElementById('dollars').value = your_calculation_results;
p.s。：只是一个直接猜测，myabe周围的东西......
答案 1 :(得分：0)
您可以使用以下代码：
将此添加到您的脚本部分：
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;
}
add onchange =＆＃34; calculate（）＆＃34;你的选择和你的完成。
您必须为所有不同的地方构建切换/案例场景，或者将选择列表中的值替换为您想要乘法的数字或其他值。
答案 2 :(得分：0)
我不确定您的定价清单我假设所有面积价格为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>