当 select 来自 <select> html 元素的项目时，如何加载新的 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;

我现在想使用下拉菜单来保存 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>

但是我如何让选择触发加载正确的页面

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

您可以使用函数来处理 page-change/redirect；并在 change 事件在 <select> 元素上触发后触发该函数：

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

参考文献：

Answer 3

在您的 select:

中使用这个 onchange 属性

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

并将每个选项的值设置为合适的url

JSFIDDLE DEMO

当 select 来自 <select> html 元素的项目时，如何加载新的 html 页面

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

html

javascript

select