ミギムキ

[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の値(=リンク先)を設定することでページが切り替わります