選擇從<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元素

回答

相關問題