Add values from two selectbox
Question
I have a question. For example, a bus ticket price. If it goes from
-
AtoB, the price is300 -
BtoC=400 -
CtoD=200 -
DtoA=600
It goes one way ( A to B to C to D to A and so on), and it is stored in two select boxes.
So, 1st select box is for source and the 2nd is for destination .
If I choose A for first select box and C for second, it should charge me 700 ( 300 + 400 ). If I go from D to C , it should charge me 1300 ( 600 + 300 + 400 ). How to write that in Javascript ? It seems simple but it confuses me.
Here is the sample code, but it just add values from two select boxes. What I wanted is add values that has one way flow. For example if I go from D to B , the result should be 900 . Thanks
<!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>
3 answers
solution1
0 ACCPTED 2016-03-10 11:49:09
It's always a good idea to keep your data and your representation seperated (there are complete frameworks built around that).
In your case the seperation of data would be taking the price from the <option value="val"> to the javascript as a data object holding the price values for different areas.
Then you could scan through this data object and create your sum
See this fiddle for a possible implementation.
Feel free to ask in the comments if anything is unclear
solution2
0 2016-03-10 11:53:12
the easiest solution I can think of is setting the label/value pairs in an array and working on that:
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)
}
this procedure relies on array.reduce, if you're new to JS this is a really important method for working with arrays.
solution3
0 2016-03-10 13:00:39
@Aides answer is right but it uses some JS magic, which might not be the best thing when trying to understand the code.
Check out this fiddle: https://jsfiddle.net/gxxpjy6j/
The code uses a graph like data structure, but it can be easily adjusted to use a full blown graph. Also the code is really easy to understand.
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;
}
Hope this helps, even if not the selected answer.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.