Javascript помните значение комбинированного списка

Question

В настоящее время у меня есть 3 поля со списком, содержащие значения, которые применяют стили к странице с использованием JavaScript.

Все эти стили применяются к файлам cookie и считываются при загрузке тела, однако я также хотел бы установить значения поля со списком в соответствии с примененными стилями.

Как мне установить значение поля со списком на основе файла cookie или примененного стиля?

<select name="sizes" onchange="fontSize(accessibility.sizes.value);"> 
  <option value='-1'>Select</option>
  <option value='10'>Small</option> <option value='12.75'>Medium</option>
  <option value='15.5'>Large</option>
</select>

function fontSize(textSize) { 
  var element = document.getElementById('content'); 
  if (element) {
   element.style.fontSize = textSize + 'px'; 
   createCookie("Font Size", textSize, 365);   
  }
} 

Заранее спасибо!

Answer 1

Если изменение выбора изменяет стиль, сначала выберите соответствующее значение, а затем активируйте обмен.Обратите внимание, что я изменил ваш скрипт, чтобы сохранить selectedIndex и применить изменения после того, как я установил индекс.Также, пожалуйста, обратите внимание, что я передаю (this) сам объект select, и я добавил к нему идентификатор.Наконец, я поставил средний размер шрифта в качестве первого пункта на случай, если люди захотят сбросить.Пожалуйста, измените его на любой размер шрифта по умолчанию

window.onload=function() {
  var sel = document.getElementById('sizes');// get the select with ID=sizes
 // the following statement gets the select and sets the index to the cookie content if
 // there IS a cookie, else it sets it to 0
 var idx = getCookie("FontSizeIdx") || 0;
  sel.selectedIndex = parseInt(idx,10); // make sure it is a number
 // now call the function and pass the select to it
  fontSize(sel);
}
function fontSize(sel) { // select object is passed as (this) and ends up here as (sel)
  var textSize = sel.options[sel.selectedIndex].value; // get the value
  var element = document.getElementById('content'); // get the content object
  if(element) { // does it exist?
    element.style.fontSize = textSize + 'px'; // set the font size 
    createCookie("FontSizeIdx", sel.selectedIndex, 365); // save the index
  }
} 

<select name="sizes" id="sizes" onchange="fontSize(this);"> 
<option value='12.75'>Select (default is medium)</option> 
<option value='10'>Small</option> 
<option value='12.75'>Medium</option> 
<option value='15.5'>Large</option> 
</select>