选择从<select> html元素

我现在有一个按钮，一个项目时，你如何加载一个新的HTML页面为每种语言允许用户在差异语言查看网站选择从<select> html元素

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

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

来源

2015-08-14 Paul Taylor

像这样简单：

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

来源

2015-08-14 15:32:33

感谢的onchange方法非常完美 –

喜，刚刚实施，它的工作原理除了显示的值总是'英文'，所以如果我选择'德语'它会去deutsch页面bu t选择显示'英语'这是混乱，因为已经设置为英文我实际上不能让页面回到英语，我只能改变为西班牙语和法语 - http://www.jthink.net/songkong/de/ –

您需要在荷兰语页面添加''。 –

你可以使用一个函数来处理换页/重定向;并触发该功能一旦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);

参考文献：

来源

2015-08-14 15:33:11

使用你选择这个onchange属性：

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

和每个选项的值设置为相应的URL

JSFIDDLE DEMO

来源

2015-08-14 15:34:33 JRulle

选择从<select> html元素

回答

相关问题