js动态生成<select>,刷新时默认值设定不起作用，求教。

<html>
<head>
<title>动态添加下拉选项</title>
</head>
<body>
<script language="javascript" type="text/javascript">
document.write("<select width=120px>");
for(var i=5;i>=1;i--)
{
   if(i==3)
   {
     document.write("<option value="+i+" selected>"+i+"</option>");
   }
   else
   {
     document.write("<option value"+i+" >"+i+"</option>");
   }
}
document.write("</select>");
</script>
</body>
</html>页面第一次加载的时候，下拉框中的默认值是3，但是当我选择2或者其他数字的时候，在刷新页面，发现下拉框的值不是3，而是我刚才选择的2，有人能解释下这个现象吗？
如果有解决的方法：能刷新显示的是3呢？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

1判断select选项中是否存在Value="paraValue"的Item
2向select选项中加入一个Item
3从select选项中删除一个Item
4删除select中选中的项
5修改select选项中 value="paraValue"的text为"paraText"
6设置select中text="paraText"的第一个Item为选中
7设置select中value="paraValue"的Item为选中
8得到select的当前选中项的value
9得到select的当前选中项的text
10得到select的当前选中项的Index
11清空select的项js 代码
// 1.判断select选项中是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
    var isExit = false;
    for (var i = 0; i < objSelect.options.length; i++) {
        if (objSelect.options[i].value == objItemValue) {
            isExit = true;
            break;
        }
    }
    return isExit;
}

// 2.向select选项中加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
    //判断是否存在
    if (jsSelectIsExitItem(objSelect, objItemValue)) {
        alert("该Item的Value值已经存在");
    } else {
        var varItem = new Option(objItemText, objItemValue);
        objSelect.options.add(varItem);
        alert("成功加入");
    }
}

// 3.从select选项中删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
    //判断是否存在
    if (jsSelectIsExitItem(objSelect, objItemValue)) {
        for (var i = 0; i < objSelect.options.length; i++) {
            if (objSelect.options[i].value == objItemValue) {
                objSelect.options.remove(i);
                break;
            }
        }
        alert("成功删除");
    } else {
        alert("该select中不存在该项");
    }
}


// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
    var length = objSelect.options.length - 1;
    for(var i = length; i >= 0; i--){
        if(objSelect[i].selected == true){
            objSelect.options[i] = null;
        }
    }
}

// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
    //判断是否存在
    if (jsSelectIsExitItem(objSelect, objItemValue)) {
        for (var i = 0; i < objSelect.options.length; i++) {
            if (objSelect.options[i].value == objItemValue) {
                objSelect.options[i].text = objItemText;
                break;
            }
        }
        alert("成功修改");
    } else {
        alert("该select中不存在该项");
    }
}

// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
    //判断是否存在
    var isExit = false;
    for (var i = 0; i < objSelect.options.length; i++) {
        if (objSelect.options[i].text == objItemText) {
            objSelect.options[i].selected = true;
            isExit = true;
            break;
        }
    }
    //Show出结果
    if (isExit) {
        alert("成功选中");
    } else {
        alert("该select中不存在该项");
    }
}

// 7.设置select中value="paraValue"的Item为选中
document.all.objSelect.value = objItemValue;

// 8.得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value;

// 9.得到select的当前选中项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

// 10.得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex;

// 11.清空select的项
document.all.objSelect.options.length = 0;
<html>
<head>
<title>动态添加下拉选项</title>
</head>
<body>
<div id=t1>
<script language="javascript" type="text/javascript">
document.getElementById("t1").innerHTML="";
var str="<select>";
//document.write("<select width=120px>");
for(var i=5;i>=1;i--)
{
   if(i==3)
   {
     //document.write("<option value="+i+" selected>"+i+"</option>");
     str+="<option value="+i+" selected>"+i+"</option>";
   }
   else
   {
     //document.write("<option value"+i+" >"+i+"</option>");
     str +="<option value"+i+" >"+i+"</option>";
   }
}
//document.write("</select>");
str+="</select>";
document.getElementById("t1").innerHTML=str;
</script>
</div>
</body>
</html>
用这种方法可以避免这个，我刚才试了一下，谁能讲详细点吗？
document.write是往当前 html 文档内写入内容   (在文档加载完成前，完成后调用document.write
则是创建新的流往里面写内容并替换当前流)。缓存应该是问题的原因，可放在服务器访问查看。innerHTML 是容器元素的属性，设置它的时候会造成 DOM 的即时解析所以不会出现类似情况
你可以这样避免：
<html>
<head>
<title>动态添加下拉选项</title>
</head>
<body onload="init();">
<script language="javascript" type="text/javascript">
function init()
{
s = document.createElement("select")
for(var i=5;i>=1;i--)
{
   if(i==3)
   {
     s.options[s.length] = new Option(i,i,true,true);
   }
   else
   {
     s.options[s.length] = new Option(i,i);
   }
}
document.body.appendChild(s)
}
</script>
</body>
</html>
function jsRemoveSelectedItemFromSelect(objSelect) {
  var length = objSelect.options.length - 1;
  for(var i = length; i >= 0; i--){
  if(objSelect[i].selected == true){
  objSelect.options[i] = null;
  }
  }
}
//表示默认为选中状态
s.options[s.length] = new Option(i,i,true,true);
如果是放在<form></form>之中，可以在onload调用form的reset()，如下：
function resetForms(){
    for(var i=0,fs=document.forms;i<fs.length;i++)fs[i].reset();
}
window.onload = resetForms;如果只想针对所有select处理，不处理其它类型表单域，就这样：
function resetSelect(){
    for(var k=0,ss=document.getElementsByTagName("select");k<ss.length;k++){
        for(var i=0,o=ss[k],os=o.options;i<os.length;i++){
            if(os[i].selected != os[i].defaultSelected){
               os[i].selected = os[i].defaultSelected;
            }
        }
    }
}
window.onload = resetSelect;
如果只想针对某个select处理，就这样：
function resetSelect(){
   for(var i=0,o=document.getElementsById("mySelectId"),os=o.options;i<os.length;i++){
       if(os[i].selected != os[i].defaultSelected){
           os[i].selected = os[i].defaultSelected;
       }
   }
}
window.onload = resetSelect;
<html>
<head>
<title>动态添加下拉选项</title>
</head>
<body >
<script language="javascript" type="text/javascript">
document.write("<select width=120px id=\"slt\">");
for(var i=5;i>=1;i--)
{
   if(i==3)
   {
     document.write("<option value="+i+" selected>"+i+"</option>");
   }
   else
   {
     document.write("<option value"+i+" >"+i+"</option>");
   }
}
document.write("</select>");var DEFAULT_VALUE = 3;function setDefault() {
var selectObj = document.getElementById('slt');

for(var i = 0; i < selectObj.options.length; i++) {
var v = selectObj.options[i].value; if (v == DEFAULT_VALUE) {
selectObj.options[i].selected = 'true';
}
}
}setDefault();</script>
</body>
</html>
要不就用面相对象的思想编程,要不就拼接HTML的innerHTML代码.灰主流没什么好处