First, you'll have to fix your "value" attributes: you need to follow the
value="..."
syntax, not
value: ...
. Also add closing tags for
select
, and you cannot put "Start" inside the
select
.
<div class=naviselection>
Start:
<select id='start'>
<option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
<option value="Centrum, Den Haag">City Center</option>
</select> End:
<select id='end'>
<option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
<option value="Centrum, Den Haag">City Center</option>
</select>
</div>
Then, to get the link you want, you need to use JavaScript. You need to have a place to put the link in first, so add an element under your div where you can put the link in:
<span id="navigationLink"></span>
Then, the JavaScript. In your
head
-tag, put a
script
tag with these contents:
function updateNavigationLink() {
var link = "https://maps.google.com/maps?saddr=" + encodeURIComponent(document.getElementById("start").value) + "&daddr=" + encodeURIComponent(document.getElementById("end").value);
document.getElementById("navigationLink").textContent = link;
}
updateNavigationLink
is the function responsible for updating the text of the element where the URL will be.
encodeURIComponent
makes sure to transform the values into valid URI components (
encodeURIComponent() - JavaScript | MDN[
^]).
Lastly, you need to make sure that this function actually gets called when you change the selected value. For that, add the
onchange="updateNavigationLink()"
attribute to both
select
tags:
<div class=naviselection>
Start:
<select id='start' onchange="updateNavigationLink()">
<option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
<option value="Centrum, Den Haag">City Center</option>
</select> End:
<select id='end' onchange="updateNavigationLink()">
<option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
<option value="Centrum, Den Haag">City Center</option>
</select>
</div>
<span id="navigationLink"></span>
Live demo:
JSFiddle[
^]