从两个选择框中添加值

我有问题。例如，巴士票价。如果从从两个选择框中添加值

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

是啊，谢谢！我也会学习它。我对此仍然陌生，所以请原谅我。 –

从两个选择框中添加值

回答

相关问题