[jQuery] セレクトボックスで言語別のページに切り替えるリンクを作りたい
- 複数の言語に対応したサイトでは、言語を切り替えるボタンが必要になります
- ボタンは目立ちやすいヘッダーに置くのが定番ですが、言語の数が多くなるほどヘッダーの領域を圧迫してしまいます。そんなときはセレクトボックスが便利です
- jQueryを使用することで、セレクトボックスの項目を選んだときにページを移動するという処理が実現できます
サンプルコード
html
<select id="select_lang">
<option value="https://migi.me/en/">EN</option>
<option value="https://migi.me/cn/>">CN</option>
<option value="https://migi.me/">JP</option>
</select>
jQuery
jQuery(function($) {
const selectLang = $('#select_lang');
if(selectLang.length) {
const baseUrl = location.protocol + '//' + location.hostname + '/';
const currentUrl = location.protocol + '//' + location.hostname + location.pathname;
const langUrl = currentUrl.replace(baseUrl, '').slice(0, 3);
selectLang.val(baseUrl);
selectLang.find('option').each(function() {
if($(this).val() == baseUrl + langUrl) {
selectLang.val($(this).val());
}
});
selectLang.change(function() {
$(location).attr('href', selectLang.find('option:selected').val());
});
}
});
サンプルコードの解説・補足
const baseUrl = location.protocol + '//' + location.hostname + '/';
const currentUrl = location.protocol + '//' + location.hostname + location.pathname;
const langUrl = currentUrl.replace(baseUrl, '').slice(0, 3);
selectLang.val(baseUrl);
selectLang.find('option').each(function() {
if($(this).val() == baseUrl + langUrl) {
selectLang.val($(this).val());
}
});
- セレクトボックスの初期値を決める処理です。表示しているページのURLが「/en/xxx/」なら「EN」を、「/cn/xxx/」なら「CN」を、それ以外なら「JP」を選択状態にします
- 「baseURL」にはドメイン名（例：https://migi.me/）が、「currentURL」にはディレクトリを含めたフルパス（例：https://migi.me/en/xxx/）が格納されます
- 「replace」で「currentURL」から「baseURL」を空文字に置換します。例えば、「currentURL」が「https://migi.me/en/xxx/」なら置換後に「en/xxx/」となります
- 置換後のURLを「slice」で先頭から3文字抜き出したものを「langUrl」に格納します。日本語以外のページを表示している場合は「en/」「cn/」などの言語を表す部分のURLが抜き出します
- あとは、セレクトボックスの各選択肢と「baseURL」に「langUrl」を付け足したもので比較を行い、一致した選択肢を選択済みの項目として扱います
selectLang.change(function() {
$(location).attr('href', selectLang.find('option:selected').val());
});
- セレクトボックスの選択項目が変わったときに発生する「change」イベントでページの切り替え処理を行います
- 「location」オブジェクトの「href」プロパティに選択中のoptionの値（＝リンク先）を設定することでページが切り替わります
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。