要在jQuery下拉菜單中支持國際化,您可以遵循以下步驟:
translations.json
(默認語言),translations_zh_CN.json
(簡體中文),translations_en_US.json
(美國英語)等。翻譯文件應包含所有需要翻譯的文本字符串及其對應的語言特定翻譯。{
"selectOption": {
"default": "請選擇",
"zh_CN": "請選擇",
"en_US": "Please select"
}
}
function loadTranslation(lang) {
$.getJSON('translations_' + lang + '.json', function (translation) {
window.translations = translation;
});
}
$(document).ready(function () {
var lang = navigator.language || navigator.userLanguage;
lang = lang.substr(0, 2); // 獲取語言代碼,如'en'或'zh'
loadTranslation(lang);
});
$('#myDropdown').append('<option value="" disabled selected>' + translations.selectOption.default + '</option>');
$('#languageSelect').on('change', function () {
var selectedLang = $(this).val();
loadTranslation(selectedLang);
updateDropdownOptions();
});
function updateDropdownOptions() {
$('#myDropdown').empty();
$('#myDropdown').append('<option value="" disabled selected>' + translations.selectOption.default + '</option>');
// 假設您有一個名為 'options' 的數組,其中包含下拉菜單的所有選項
options.forEach(function (option) {
$('#myDropdown').append('<option value="' + option.value + '">' + option.text + '</option>');
});
}
<select>
元素和下拉菜單本身。<select id="languageSelect">
<option value="en_US">English</option>
<option value="zh_CN">中文</option>
</select>
<select id="myDropdown">
<!-- 選項將通過JavaScript動態填充 -->
</select>
通過以上步驟,您的jQuery下拉菜單就可以支持國際化了。用戶可以根據自己的偏好選擇語言,菜單選項將相應地顯示正確的翻譯文本。