Создание раскрывающегося меню языка с перенаправлением и локальным хранилищем

Question

У меня есть веб-приложение с использованием Umbraco (MVC .NET), у которого есть (на данный момент) только два корня. Они называются «английский» и «шведский». Английский - это веб-страница по умолчанию, а шведский язык должен быть необязательным для пользователя. Для того, чтобы пользователь мог изменить язык отобразить их в выпадающем меню, используя бритву:

@{ 
    List<SelectListItem> languages= new List<SelectListItem>(); 
    foreach (var language in Model.Content.Siblings()) 
    { 
     languages.Add(new SelectListItem 
     { 
     Text = language.Name, 
     Value = language.Url 
    }); 
} 
@Html.DropDownList("LanguageSelect",new SelectList(languages,"Value","Text"), htmlAttributes: new { id = "LanguageSelect" }); 
} 

Это правильно выводит имена корней на корневом уровне. Теперь используя javascript i reeroute, используя onchange:

document.getElementById("LanguageSelect").onchange = function() { 
    window.location.href = this.value;  
}; 

Это работает для перехода с одного языка на другой. Теперь начинается сложная часть: поскольку этот раскрывающийся список существует в моем главном шаблоне, унаследованном всеми представлениями, когда загружается новое представление, все из шаблона перезагружается. Поэтому выпадающее меню перезагружается, а выбранный язык теряется в выпадающем меню. Вместо того, чтобы смотреть на URL-адрес, значение которого должно быть указано в раскрывающемся списке, я хотел использовать локальное хранилище. Поэтому я попытался установить это в функции onchange для выпадающего меню:

localStorage.setItem("LanguageSelectStoredUrl", this.value); 

Но это сохраняет URL. Я хотел бы сохранить текст так же, как «шведский», и просто установить текущее значение раскрывающегося списка для сохраненного значения. Это должно работать, не так ли? Если да, то как мне это сделать? Любые причины не делать этого?

Еще одна причина, почему я хотел бы сделать это таким образом, потому что я хочу, чтобы пользователь в одной из последующих сессий, не имея выбора языка снова с помощью:

$(document).onload(function(){ 
    if(localStorage.getItem("LanguageSelectStoredValue") != null){ 
     // Check if the dropdown value is equal to the stored value 
     // If so do nothing 
     // Else reroute to locally stored URL 

Но так как я не знаю, как хранить текстовое значение раскрывающегося списка я не могу сделать это, и, возможно, есть более подходящее событие для подключения к, чем onload?

Вот краткое изложение моих вопросов, которые мне нужно помочь, чтобы выполнить задачу под рукой:

1. Как получить текст выбранного элемента выпадающего?
2. Как программно выбрать одно из значений в выпадающем меню?
3. Есть ли лучшее событие, чтобы подключиться к нему, чем при загрузке?

Что-нибудь еще, что я мог упустить?

Спасибо!

Answer 1

1. Чтобы получить выбранный текст выпадающего списка:

   JavaScript:

   var languageSelect = document.getElementById("LanguageSelect"); 
   var selectedText = languageSelect.options[languageSelect.selectedIndex].text; 
   

   JQuery:

   $('#LanguageSelect option:selected').text(); 
   

2. Использование $("#LanguageSelect").val('ValFromDdl'); позволит вам выбрать пункт в выпадающем списке.

3. Вы можете использовать $(document).ready, чтобы прочитать свой объект хранения и инициализировать выпадающий список.