Javascript记住combobox值 [英] Javascript remember combobox value

问题描述

我目前有3个组合框，其中包含使用javascript将样式应用于网页的样式。

所有这些样式都应用于Cookie，我还要设置组合框的值以匹配应用的样式。

如何根据Cookie或应用样式设置组合框值？

 < select name =sizesonchange = fontSize（accessibility.sizes.value）;> 
< option value =' -  1'>选择< / option> 
< option value ='10'>小< / option> < option value = '12 .75'>中< / option> 
< option value = '15 .5'>大< / option> 
< / select> 
  

  function fontSize（textSize）{
 var element = document.getElementById（'content'）; 
 if（element）{
 element.style.fontSize = textSize +'px'; 
 createCookie（Font Size，textSize，365）; 
} 
} 
  

提前感谢！

解决方案

如果更改select会更改样式，请先选择相关值，然后触发onchange。注意我更改了脚本以保存selectedIndex并在设置索引后应用更改。还请注意我通过（这）的选择对象本身，我已经添加了一个ID。最后，我把中等字体大小作为第一项，以防人们想要重置。请将其更改为默认字体大小

  .onload = function（）{
 var sel = document.getElementById（'sizes'）; //获取ID = sizes的选择
 //以下语句获取select并将索引设置为cookie内容如果
 //有一个cookie，否则设置为0 
 var idx = getCookie（FontSizeIdx）|| 0; 
 sel.selectedIndex = parseInt（idx，10）; //确保它是一个数字
 //现在调用该函数并将select传递给它
 fontSize（sel）; 
} 
 function fontSize（sel）{//选择对象作为（this）传递，结束为（sel）
 var textSize = sel.options [sel.selectedIndex] .value ; //获取值
 var element = document.getElementById（'content'）; //获取内容对象
 if（element）{//它存在吗？ 
 element.style.fontSize = textSize +'px'; //设置字体大小
 createCookie（FontSizeIdx，sel.selectedIndex，365）; //保存索引
} 
} 
  

< pre class =lang-html prettyprint-override> < select name =sizesid =sizesonchange =fontSize（this）;>
< option value = '12 .75'>选择（默认为medium）< / option>
< option value ='10'>小< / option>
< option value = '12 .75'>中< / option>
< option value = '15 .5'>大< / option>
< / select>


I currently have 3 combo boxes containing values which apply styles to the page using javascript.

All these styles are applied to a cookie and read on body load, however I'd like to also set the combo box's values to match the applied styles.

How do I go about setting a combo box value based on a cookie or applied style?

<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);   
  }
} 

Thanks in advance!

解决方案

If changing the select is changing the style, first select the relevant value then trigger the onchange. Notice I changed your script to save the selectedIndex and to apply the change after I set the index. Also please notice I pass (this) which the the select object itself and I have added an ID to it. Lastly I put the medium fontsize as the first item in case people want to reset. Please change that to whatever is the default font size

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>

这篇关于Javascript记住combobox值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！