從兩個選擇框中添加值

我有問題。例如，巴士票價。如果從從兩個選擇框中添加值

A去B，價格300
B到C = 400
C到D = 200
D到A = 600

單程（A到B到C到D到A等），它存儲在兩個選擇框中。

所以，1st選擇框是源和2nd是目的地。

如果讓我選擇A爲第一選擇框，C爲第二，它應該收我700（300 + 400）。如果我從D到C，它應該向我收取1300（600 + 300 + 400）。如何寫在Javascript中？這看起來很簡單，但它讓我感到困惑。

下面是示例代碼，但它只是從兩個選擇框中添加值。我想要的是添加具有單向流動的值。例如，如果我從D到B，結果應該是900。由於

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
p{ 
    display: inline; 
} 
</style> 
</head> 
<body> 
<p>From :</p> 
<select name= "from"> 
    <option value="2000">A</option> 
    <option value="5000">B</option> 
    <option value="3000">C</option> 
    <option value="10000">D</option> 
</select> 
<p>To :</p> 
<select name= "to"> 
    <option value="2000">A</option> 
    <option value="5000">B</option> 
    <option value="3000">C</option> 
    <option value="10000">D</option> 
</select> 
<button type="button" onclick="output();">Calculate</button><br> 
<p id="result"></p> 
<script type="text/javascript"> 
var result = document.getElementById('result'); 
function output(){ 
    var sour = document.getElementsByName("from")[0].value; 
    var dest = document.getElementsByName("to")[0].value; 
    var price = 0; 
    var x; 
    for (x = 0; x < 4; x++) { 
     if (sour[x] != dest[x]){ 
      price += parseInt(sour) + parseInt(dest); 
      result.innerHTML = price; 
      console.log (price); 
     } 

    } 
} 
</script> 
</body> 
</html>

來源

2016-03-10 Tommy Wu

如果你想讓別人幫你，你需要提供一些示例代碼。看到這個更多的信息 - http://stackoverflow.com/help/mcve –

你可以使用什麼庫（jQuery，角）？就像@JohnC說的那樣，請告訴我們你到現在爲止如何解決問題。 – mkalex

對不起。我是新來的。我已經發布了代碼 –

它總是一個好主意，讓您的數據和表示分隔（有圍繞構建完整的框架）。

在你的情況下，數據的分離將從<option value="val">到JavaScript的價格作爲持有不同區域的價格值的數據對象。

然後，你可以通過這個數據對象進行掃描，並創建和

見this fiddle一個可能的實現。

隨意問的意見，如果有不清楚的地方

來源

2016-03-10 11:49:09 Aides

是的，謝謝你的幫助！我會試着更多地瞭解這個JS。但是爲什麼當我選擇D作爲源代碼和A作爲目的地時，結果會返回20000。難道不是12000？我想單向流動，所以它不能從D回到C到B到A –

哦，是的。也許我的解釋不清楚。我想要的是當A作爲源，B作爲目的地的結果應該是2000.當A作爲源和C作爲目的地時，結果應該是7000.（2000 + 5000）PS：A> 2000，B> 5000，C> 3000，D> 10000 –

你有兩個條目的索引。我在我的例子中做的是從低值到高值循環，所以你可以在兩個方向上旅行。如果您只想用D連接到A，您可以檢查是否destIndex sourIndex然後總結從0到destIndex和從sourIndex到maxIndex。看到你的評論 - 只是排除目的地指數 – Aides

我能想到的是設置標籤/值對的數組和工作的最簡單的解決方案：

var arr = [{ 
    label: 'A', 
    val: 2000 
}, { 
    label: 'B', 
    val: 5000 
}, { 
    label: 'C', 
    val: 3000 
}, { 
    label: 'D', 
    val: 10000 
}, ]; 


function output() { 
    var sour = document.getElementsByName("from")[0].value; 
    var dest = document.getElementsByName("to")[0].value; 

    var res = arr.reduce(function(ac, x) { 
     //first you filter the objects in between sout and dest 
     if (x.label.charCodeAt() >= sour.charCodeAt() && x.label.charCodeAt() <= dest.charCodeAt()) 
     return ac += x.val; 
     //else 
     return ac; 
    }, 0) 
    result.innerHTML = res; 
    console.log("res", res) 

}

這個程序依賴於array.reduce，如果你是JS的新手，這對於處理數組非常重要。

fiddle

來源

2016-03-10 11:53:12 maioman

感謝您的幫助！但它返回0時，D到A.我想要的是當D到B結果是600 + 300 = 900 –

@Aides的答案是正確的，但它使用了一些JS魔法，試圖理解代碼時可能不是最好的事情。

退房此小提琴：https://jsfiddle.net/gxxpjy6j/

代碼使用像數據結構的圖，但它可以被容易地調整爲使用一個完全成熟的曲線圖。代碼也很容易理解。

HTML：

<body> 
<p>From :</p> 
<select name= "from"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
    <option value="D">D</option> 
</select> 
<p>To :</p> 
<select name= "to"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
    <option value="D">D</option> 
</select> 
<button type="button" onclick="output();">Calculate</button><br> 
<p id="result"></p> 
</body>

的Javascript

var result = document.getElementById('result'); 
output = function output(){ 
    var src = document.getElementsByName("from")[0].value; 
    var dst = document.getElementsByName("to")[0].value; 
    var curr = src; 
    var price = 0; 
    var x; 

    var adjList = { 
     'A': ['B', 2000], 
     'B': ['C', 5000], 
     'C': ['D', 3000], 
     'D': ['A', 10000], 
    } 

    while (curr != dst) { 
     price += adjList[curr][1]; 
     curr = adjList[curr][0]; 
    } 

    result.innerHTML = price; 
}

希望這有助於，即使沒有選擇的答案。

來源

2016-03-10 13:00:39 mkalex

是啊，謝謝！我也會學習它。我對此仍然陌生，所以請原諒我。 –

從兩個選擇框中添加值

回答

相關問題