Populate HTML Page with Dropdown List

Question

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.

ideally you wish to set a cookie, and refresh the page and have it put in serverside in the apropriate language. — Tschallacka, Oct 24 '16 at 12:14
Can you give us your current attempt? Something to work off of. This is a generic question. — bflemi3, Oct 24 '16 at 12:28
Just edited to show the example I was considering, but I can't find the PHP file the example seems to be using. — Marcus, Oct 24 '16 at 12:44

Niedermann IT-Dienstleistungen · Answer 1 · 2016-10-24T13:14:59.543

1

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.

edited Oct 24 '16 at 13:14

answered Oct 24 '16 at 12:18

Niedermann IT-Dienstleistungen

31
4

Many thanks for your suggestion. Will that still be the case if there is around 15 paragraph of text, one for each of the 15 values? – Marcus Oct 24 '16 at 12:28
How many text are we talking about? I think if it all together takes up to 1-2 kB it is still the better solution – Niedermann IT-Dienstleistungen Oct 24 '16 at 12:30
Approx 70 to 100 words. – Marcus Oct 24 '16 at 12:33
sorry forgot to add, 70 to 100 words for each value. – Marcus Oct 24 '16 at 12:34
Okay, i would still prefer to deliver the content via the html-file. This will have beside of the performance using only one request other benefits, too: SEO for example (Google will be able to read your text-content since it is not always performing all javascript requests) – Niedermann IT-Dienstleistungen Oct 24 '16 at 12:35
Thanks, SEO is extremely important for my scenario. Do you know what I can add to show the text, once the submit button is pressed? I am working off the example from my post. – Marcus Oct 24 '16 at 12:46
1.) Add a css rule to hide every possible paragraph `.text {display: none}` 2.) Add to every paragraph an id attribute, e. g. `id="text-2"` 3.) Add a `data-paragraph="text-2"` to each option (to make a connection from option to correspondenting paragraph) 4.) Add a javascript onchange listener to your select-box. 5.) On change add an css class like `class="selected-text"` to the correspondenting paragraph. 6.) Add a css rule to show selected paragraphs `.selected-text {display: block}` – Niedermann IT-Dienstleistungen Oct 24 '16 at 13:00

score 0 · Answer 2 · answered Oct 24 '16 at 12:45

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.

You're welcome. If you put the data into the divs they will get indexed by the search engines. But it's not generally recommended to try to get hidden content indexed. See http://stackoverflow.com/questions/514659/does-google-index-pages-with-hidden-divs. — Ken Palmer, Oct 24 '16 at 14:19
Also you could assign the .info class a property of display:none in your css, and remove the first $('.info').hide(); statement. That way if you have a lot of divs (or a slow connection) they won't *flash* when the page loads. This is just a quick, self-contained example to demonstrate the idea. Good luck with your project. — Ken Palmer, Oct 24 '16 at 14:31

Michael · Answer 3 · 2016-10-24T13:05:05.640

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>

Populate HTML Page with Dropdown List

3 Answers3