JS如何把当前页面所有的select表单元件 还原为最初状态

如果 select 选项被修改了，用 JavaScript 是获取不到初始值的。办法是在页面加载时保存所有的 select 选中项，这样就可以还原了。

解决方案 »

  1.   

    如果在form里可以用reset 其他的只能用全局变量去记初始值了
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Untitled Document</title>
        </head>
        <script language="JavaScript">
            function reset(){
                var objs = document.getElementsByTagName("select");
                for (var i = 0; i < objs.length; i++) {
                    with (objs[i]) {
                        value = oriVal;
                    }
                }
            }
        </script>
        <body>
            <select name="category" id="category" oriVal="0">
                <option value="0" selected="selected">----请选择类别---- </option>
                <option value="1">1.缺乏用户参与 </option>
                <option value="2">2.缺乏行政管理支持 </option>
                <option value="3">3.业务目标模糊 </option>
                <option value="4">4.缺乏基本稳定的业务需求 </option>
                <option value="5">5.缺乏经验丰富的项目经理 </option>
                <option value="6">6.缺乏财务管理 </option>
                <option value="7">7.对外依赖性强 </option>
                <option value="8">8.缺乏技术资源 </option>
                <option value="9">9.缺乏正规方法 </option>
                <option value="10">10.非标准工具和基础架构 </option>
            </select>
            <select name="category" id="class" oriVal="0">
                <option value="0" selected="selected">----请选择类别---- </option>
                <option value="1">1.缺乏用户参与 </option>
                <option value="2">2.缺乏行政管理支持 </option>
                <option value="3">3.业务目标模糊 </option>
                <option value="4">4.缺乏基本稳定的业务需求 </option>
                <option value="5">5.缺乏经验丰富的项目经理 </option>
                <option value="6">6.缺乏财务管理 </option>
                <option value="7">7.对外依赖性强 </option>
                <option value="8">8.缺乏技术资源 </option>
                <option value="9">9.缺乏正规方法 </option>
                <option value="10">10.非标准工具和基础架构 </option>
            </select>
            <input type="button" value="test" onclick="reset();">
        </body>
    </html>
      

  3.   

    可惜上面的方法在FF下不好用。
    给个FF下也好用的吧。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Untitled Document</title>
        </head>
        <script language="JavaScript">
    window.onload = function(){
                var objs = document.getElementsByTagName("select");
                for (var i = 0; i < objs.length; i++) {
                    with (objs[i]) {
                        val = value;
                    }
                }
    }
            
            function reset(){
                var objs = document.getElementsByTagName("select");
                for (var i = 0; i < objs.length; i++) {
                    with (objs[i]) {
                        value = val;
                    }
                }
            }
        </script>
        <body>
            <select name="category" id="category">
                <option value="0" selected="selected">----请选择类别---- </option>
                <option value="1">1.缺乏用户参与 </option>
                <option value="2">2.缺乏行政管理支持 </option>
                <option value="3">3.业务目标模糊 </option>
                <option value="4">4.缺乏基本稳定的业务需求 </option>
                <option value="5">5.缺乏经验丰富的项目经理 </option>
                <option value="6">6.缺乏财务管理 </option>
                <option value="7">7.对外依赖性强 </option>
                <option value="8">8.缺乏技术资源 </option>
                <option value="9">9.缺乏正规方法 </option>
                <option value="10">10.非标准工具和基础架构 </option>
            </select>
            <select name="category" id="class">
                <option value="0" selected="selected">----请选择类别---- </option>
                <option value="1">1.缺乏用户参与 </option>
                <option value="2">2.缺乏行政管理支持 </option>
                <option value="3">3.业务目标模糊 </option>
                <option value="4">4.缺乏基本稳定的业务需求 </option>
                <option value="5">5.缺乏经验丰富的项目经理 </option>
                <option value="6">6.缺乏财务管理 </option>
                <option value="7">7.对外依赖性强 </option>
                <option value="8">8.缺乏技术资源 </option>
                <option value="9">9.缺乏正规方法 </option>
                <option value="10">10.非标准工具和基础架构 </option>
            </select>
            <input type="button" value="test" onclick="reset();">
        </body>
    </html>