Drop down menu with javascript?
Question
Hi i am trying to create drop down menu with javascript where once i select place i get print out in input box in one will be Latitude of place and in second i will get Longitude. My problem is that i can only do it to output either Lat or Lon into the input so i am wondering is there a way of doing this to get both of them printed? Thank you. Here is my code:
<html>
<script language="JavaScript"><!--
function onChange() {
var Current =
document.formName3.selectName3.selectedIndex;
document.formName3.Lat1.value =
document.formName3.selectName3.options[Current].value;
document.formName3.Lon2.value =
document.formName3.selectName3.options[Current].value;
}
//--></script>
<body>
<form
name="formName3"
onSubmit="return false;"
>
<select
name="selectName3"
onChange="onChange()"
>
<option
value=""
>
Find Place
<option
value = "52.280431"
value ="-9.686166"
>
Shop
<option
value = "52.263428"
value="-9.708326"
>
Cinema
<option
value = "52.270883"
value="-9.702414"
>
Restaurant
<option
value = "52.276112"
value="-9.69109"
>
Hotel
<option
value = "52.278994"
value="-9.6877"
>
Petrol Station
</select>
<br><br>
Lat2
<input
name="Lat1"
type="text"
value=""
>
Lon2
<input
name="Lon2"
type="text"
value=""
>
</form>
</body>
</html
2 answers
solution1
3 2011-04-21 13:17:41
Option only has one value, not two.
Rather than using what you have, instead consider providing a space separated list as your option, ex:
<!-- make sure to close all your tags as shown below -->
<option value = "52.280431 -9.686166">Shop</option>
Then you will need to break them up in your Javascript
function onChange() {
var Current =
document.formName3.selectName3.selectedIndex;
var latLong = document.formName3.selectName3.options[Current].value;
// handle case where the value is ""
if (!latLong) {
document.formName3.Lat1.value = "";
document.formName3.Lon2.value = "";
return;
}
// split them on space
var latLongItems = latLong.split(" ");
// latLongItems[0] contains first value
document.formName3.Lat1.value = latLongItems[0];
// latLongItems[1] contains second
document.formName3.Lon2.value = latLongItems[1];
}
You can see this in action here . Note that I made your Javascript less obtrusive by attaching all handlers in a window.onload handler rather than in the HTML. Unobtrusive Javascript is considered a Javascript best practice.
solution2
0 ACCPTED 2011-04-21 13:29:10
Here you go, I fiddled you a solution.
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.