0

I need to create a drop down menu in HTML. The idea is that when I click on the option, let's say a city, below the menu automatically should appear detailed contact information.

So for example. If I choose London, automatically should appear street address, phone, etc. Could be with submit button like below, but better without.

<form action="process.php" method='post'>
<select name="cities">
<option value="London">London</option>
<option value="NY">NY</option>
<option value="Rome">Rome</option>
<option value="Paris">Paris</option>
</select>
<input type="submit" />
</form>

I'm not so good in HTML, will really appreciate some help

arteo
  • 1
  • I don't have time to give you an answer right now, but this will require javascript so you may want to add that to your tags so javascripters can find your question. – jcmiller11 Oct 29 '14 at 16:30
  • 1
    @arteo If dont want to use submit button , you could use ajax or if you are using submit button. get the city value in php and display the address. – Cherry Oct 29 '14 at 16:33
  • 1
    Where is this information stored? Is it on a server? Is it hard coded somewhere? Anyway you need js. – Wouter Florijn Oct 30 '14 at 09:46

1 Answers1

0

Is this (check this fiddle) what you are looking for??

All you need is idea on Javascript or Jquery. Code in above fiddle is just for sample or reference. For better usage please refer to Jquery Ajax.

Code is :

    $('#cities').change(function(){
    var data = $('#cities :selected').val();
    document.getElementById("data").style.display = "block";
    if(data === "Paris")
        document.getElementById("data").innerHTML = "You have selected Paris";
    else if(data === "Rome")
        document.getElementById("data").innerHTML = "You have selected Rome";
    else if(data === "NY")
        document.getElementById("data").innerHTML = "You have selected NY";
    else if(data === "London")
        document.getElementById("data").innerHTML = "You have selected London";    
    else
        document.getElementById("data").style.display = "none";
});
Chakri
  • 770
  • 2
  • 7
  • 24