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

justkt · Accepted Answer · 2011-04-21 13:24:31Z

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.

Dai · Accepted Answer · 2011-04-21 13:29:10Z

0

Here you go, I fiddled you a solution.

http://jsfiddle.net/ZHHc7/

answered Apr 21, 2011 at 13:29

Dai

1,5101 gold badge11 silver badges12 bronze badges

Collectives™ on Stack Overflow

Drop down menu with javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related