JavaScript Program to Show City Information on Dropdown Selection

JavaScript Program to Show City Information on Dropdown Selection

Write a JavaScript program to create dropdown list and dislay the selected city information.

Write html script that displays dropdownlist containing options newdelhi, mumbai, bangalore. Write proper JavaScript such that when the user selects any options corresponding description of about 20 words and image of the city appear in table which appears below on the same page.



Source Code
<html>
<head>
    <title>Dropdown menu for Cities</title>
    <script>
        function updateData()
        {
            with(document.forms.myform)
            {
                var selectedCity = cities.options[cities.selectedIndex].value
                var image = document.getElementById('image')
                var info = document.getElementById('info')

                switch(selectedCity)
                {
                    case 'New Delhi':
                    image.src= "delhi.gif"
                    info.innerText = "Delhi, officially the National Capital Territory of Delhi (NCT), is a city and a union territory of India containing New Delhi, the capital of India. It is bordered by Haryana (Gurugram, Faridabad, Jhajjar and Sonipat) on three sides and by Uttar Pradesh (Gautam Budh Nagar, Ghaziabad and Baghpat) to the east. The NCT covers an area of 1,484 square kilometres (573 sq mi)."
                    break;

                    case 'Mumbai':
                    image.src= "mumbai.gif"
                    info.innerText = "Mumbai (also known as Bombay) is the most populous city in India according to 2011 Indian census and a Megacity with an population of 12.4 million living under the Mumbai city limits which is administered by the Municipal Corporation of Greater Mumbai. Mumbai is the most densely populated Megacity in the world. Mumbai is also the Global city and the financial capital of India."
                    break;

                    case 'Bangalore':
                    image.src= "bangalore.gif"
                    info.innerText = "Bangalore, officially known as Bengaluru, is the capital of the Indian state of Karnataka. It has a population of over ten million, making it a megacity and the third-most populous city and fifth-most populous urban agglomeration in India. It is located in southern India, on the Deccan Plateau at an elevation of over 900 m (3,000 ft) above sea level, which is the highest among India's major cities."
                    break;
                }
            }
        }
    </script>
</head>

<body>
<p id="panel">Select the city</p>
<form name="myform">
    <select name="cities" onchange="updateData()">
        <option value="NA">None</option>
        <option value="New Delhi">New Delhi</option>
        <option value="Mumbai">Mumbai</option>
        <option value="Bangalore">Bangalore</option>
    </select><br/><br/>

    <table>
        <tr>
            <img id="image">
        </tr>
        <tr>
        <p id="info"></p>
        </tr>
    </table>
</form>
</body>

</html>
Output