从一个项目中选择一个项目时，如何加载新的html页面 <select> html元素

Question

我目前对每种语言都有一个按钮，以允许用户查看不同语言的网站

<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;

我现在想使用下拉菜单来节省空间

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

但是我如何进行选择会触发要加载的正确页面

Answer 1

就这么简单：

<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>

让我知道它是否无效。

您也可以尝试不打扰的方式：

<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;
});

Answer 2

您可以使用一个函数来处理页面更改/重定向； 并在<select>元素上触发change事件后触发该函数：

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);

参考文献：

• Document.location 。
• Document.querySelector() 。
• EventTarget.addEventListener() 。

Answer 3

在您的选择中使用此onchange属性：

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

并将每个选项的值设置为适当的网址

JSFIDDLE演示