Using two spinners to calculate a value and display results.

Hi All,

I am new to this forum so excuse me if this question have been asked before.
What I would like to do is use two spinners in my app to calculate a value after selecting two options. For example spinner 1 is for starting destination and spinner 2 is for final destination. After selecting the two I want it to display the distance and how long it will take you to travel that distance.
I have created a dist.js file like this:
[code]
var dist = [
['Town1', [], []],
['Town2', [271], ['10h30m']],
['City1', [93,178], ['3h26m','7h04m']],
['City2', [342,71,245], ['13h24m','2h30m','9h29m']],
function reverse(a, b){if (a>b) return -1;if (a <b) return 1;return 0;}function setOptions(id) {var selbox = document.getElementById(id);selbox.options.length = 0;var ct = []; for (var i = dist.length - 1; i >= 0; i--) {ct[i] = dist[i][0]+','+i;} ct.sort(reverse); for (var i = dist.length - 1; i >= 0; i--) {var c = ct[i].split(','); selbox.options[selbox.options.length] = new Option(c[0],c[1]);}}function calc() {var v1 = document.getElementById('ca').value;var v2 = document.getElementById('cb').value;var dst = 0;if (v1 != v2) {dst =dist[Math.max(v1,v2)][1][Math.min(v1,v2)];tme = dist[Math.max(v1,v2)][2][Math.min(v1,v2)];}
[/code]
And a basic html form like this:

It works great in WebView, but I don't want it in webview, instead i want to use two spinners to select the options and display the results.

The problem is I don't know how to go about in achieving my goal.
Any help would be greatly appreciated.
Thanks