CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Marcus
Marcus

Reputation: 5

Populate HTML Page with Dropdown List

I am trying to insert further text into a HTML page based on the option selected from a dropdown box.

For example, if a user selects 'UK' from the dropdown list, directly beneath I would like the text 'The capital city of the UK is London'.

The additional text is a paragraph long, would it be better if the additional text was added from a seperate HTML file, in order to reduce the main HTML page file size?

I have found the following link, will this be good for 15 paragraphs text, one for each of the 15 values.

<!DOCTYPE html>
<html>
<body>

<form action="action_page.php">
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit">
</form>

</body>
</html>

Source: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select

I can't seem to find the PHP file though from the above example.

Thanks very much for reading.

Upvotes: 0

Views: 3970

Answers (3)

Niedermann IT-Dienstleistungen
Niedermann IT-Dienstleistungen

Reputation: 31

If you put it in a seperate HTML-file you would need another request to get the text-information.

I would put it directly into the markup and display or not it depending on the selected value in dropdown list. This makes the HTML-file some bigger but the performance should be better than sending a request at each click.

Beside the performance it is important for SEO, Google does not execute every javascript and can not get the information of the paragraphs if you load it via ajax.

Especially since most web servers deliver the content gzipped, some more bytes will not blow up your HTML-file - the bottleneck would be the latency of the server-roundtrip.

Upvotes: 1

Michael
Michael

Reputation: 863

I misunderstood the question, but my answer would still be to use a json-array containing objects with the information you need, then populate the div depending on which manufacturer/country was selected.

JSON data would look like this:

[
  {
    manufacturer: 'Volvo',
    description: 'Volvo is blabla...'
  },
  {
    manufacturer: 'BMW',
    description: 'BMW is blabla...'
  }  
]

OLD answer:

My suggestion would be to use a json-object to store the cities depending on which country was set. Then load the dropdown from the json. It would also make it very easy to alter the dropdown-list contents...

So, something like this:

var countries = [
  {
    country: "England",
    cities: [
    	"London",
      "York",
      "Manchester"
    ]
  },
  {
    country: "France",
    cities: [
    	"Paris",
      "Lyon"
    ]
  }
]

var countryDropdown = document.getElementById('country-dropdown');
var cityDropdown = document.getElementById('city-dropdown');

var populateCountries = function() {
  var countryOptions = '';

  for(var i = 0; i < countries.length; i++) {
    var option = document.createElement('option');
    option.value = i;
    option.innerHTML = countries[i].country;
    countryOptions += option.outerHTML;
  }

  countryDropdown.innerHTML = countryOptions;
}

var populateCities = function(countryIndex) {
  var cityOptions = '';

  for(var i = 0; i < countries[countryIndex].cities.length; i++) {
    var option = document.createElement('option');
    option.value = i;
    option.innerHTML = countries[countryIndex].cities[i]
    cityOptions += option.outerHTML;
  }

  cityDropdown.innerHTML = cityOptions;
}

populateCountries();
populateCities(0);

countryDropdown.onchange = function(e) {
	populateCities(this.value);
}
<select id="country-dropdown">
</select>

<select id="city-dropdown">
</select>

Upvotes: 0

Ken Palmer
Ken Palmer

Reputation: 2445

Here is a quick solution with an example jQuery script.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function() {
            $('.info').hide();
            $('#countryList').on('change', function() {
                $('.info').hide();
                var countryCode = $('#countryList').val();
                $('.info.' + countryCode).show();
            });
        });
    </script>
</head>
<body>

<select id="countryList">
    <option value="">[Select Country]</option>
    <option value="DK">Denmark</option>
    <option value="DE">Germany</option>
    <option value="SE">Sweden</option>
    <option value="RO">Romania</option>
    <option value="UK">United Kingdom</option>
</select>

<div class="info DK">Copenhagen is the capital of Denmark.</div>
<div class="info DE">Berlin is the capital of Germany.</div>
<div class="info SE">Stockholm is the capital of Sweden.</div>
<div class="info RO">Bucharest is the capital of Romania.</div>
<div class="info UK">Londaon is the capital of the United Kingdom.</div>

</body>
</html>

This is an easy way to handle the dynamic show/hide piece.

Regarding your question, "would it be better if the additional text was added from a seperate HTML file," Stefan Niedermann is right, just store it in the markup. Especially if it's only 70 to 100 words. If you have a lot of detailed information to pull in, another option would be to store that content in a database and retrieve it via AJAX.

Now if many of those 70 to 100 words get repeated, i.e. "X is the capital of Y", "Y has a population of Z", etc., then you could adjust the jQuery a bit and put those details into an array, just have one display div, and then dynamically populate the contents of that div with those bits.

Upvotes: 0

Related Questions