CODEWITHSUNDEEP
javascripthtmlselect
Paul Taylor
Paul Taylor

Reputation: 13210

How do you load a new html page when select an item from a <select> html element

I currently have a button for each language to allow users to view website in difference languages

<a href="http://www.jthink.net/songkong/en" title='English'><img src="http://static.albunack.net/images/flags/flags-iso/shiny/32/GB.png" alt="English" height="32" width="32" valign="top"></a>&nbsp;
<a href="http://www.jthink.net/songkong/de" title='Deutsch'><img src="http://static.albunack.net/images/flags/flags-iso/shiny/32/DE.png" alt="Deutsch" height="32" width="32"  valign="top"></a>&nbsp;
<a href="http://www.jthink.net/songkong/es" title='Español'><img src="http://static.albunack.net/images/flags/flags-iso/shiny/32/ES.png" alt="Español" height="32" width="32"  valign="top"></a>&nbsp;
<a href="http://www.jthink.net/songkong/fr" title='Français'><img src="http://static.albunack.net/images/flags/flags-iso/shiny/32/FR.png" alt="Français" height="32" width="32"  valign="top"></a>&nbsp;

I now want to use a drop down to save space

<select>
  <option value="en">English</option>
  <option value="de">Deutsch</option>
  <option value="es">Español</option>
  <option value="fr">Français</option>
</select>

but how do I make a selection trigger the correct page to be loaded

Upvotes: 2

Views: 1919

Answers (3)

David Thomas
David Thomas

Reputation: 253318

You could use a function to handle the page-change/redirect; and trigger that function once the change event has fired on the <select> element:

function loadNewPage () {
    // string containing the base URL to which you
    // wish the page to load:
    var baseURL = "http://www.jthink.net/songkong/",
    // the currently-selected value of the selected <option>:
        language = this.value;

    // changing the page's URL to the created URL,
    // and loading that page:
    document.location = baseURL + language;
}

// using document.querySelector() to reference the first (if any)
// <select> element on the page,
// and using addEventListener() to listen for the 'change' event,
// and assigning the loadNewPage() function to handle that event:
document.querySelector('select').addEventListener('change', loadNewPage);

References:

Upvotes: 0

JRulle
JRulle

Reputation: 7568

use this onchange attribute in your select:

<select onchange="window.location = this.options[this.selectedIndex].value;">

and set the value of each option to the appropriate url

JSFIDDLE DEMO

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

As simple as this:

<select onchange="location.href='http://www.jthink.net/songkong/'+this.value;">
  <option value="en">English</option>
  <option value="de">Deutsch</option>
  <option value="es">Español</option>
  <option value="fr">Français</option>
</select>

Let me know if it doesn't work.

You can try unobtrusive way too:

<select id="langchange">
  <option value="en">English</option>
  <option value="de">Deutsch</option>
  <option value="es">Español</option>
  <option value="fr">Français</option>
</select>

document.querySelector('#langchange').addEventListener('change', function () {
  location.href = "http://www.jthink.net/songkong/" + this.value;
});

Upvotes: 5

Related Questions