cj,又来麻烦你了。

劳动了昨天晚上，老大说了这jquery代码维护人员看起来累。这。打算改成js代码。前提条件：
后天传到页面的是一个list<Vo>
比如Vo里又两个属性，no，type
我拼为字符串显示在select的option里，显示如下:（两个select是一样的内容，要作出2级联动）<select id="From"> 
<option selected="selected" value="0">Please Select</option> 
<option value="hkd`001" >hkd`001</option> 
<option value="cny`001" >cny`001</option> 
<option value="hkd`002" >hkd`002</option> 
<option value="cny`002" >cny`002</option> 
</select> 
<select id="To"> 
<option selected="selected" value="0">Please Select</option> 
<option value="hkd`001" >hkd`001</option> 
<option value="cny`001" >cny`001</option> 
<option value="hkd`002" >hkd`002</option> 
<option value="cny`002" >cny`002</option> 
</select> 
现在问题是：
1，我想保存刚进页面时整个select，方面以后点击“取消”按钮，恢复select的原始状态，但是，为程序里使用在function外使用了var acctto = document.getElementById("To");
var list = acctto.innerHTML;list为空，怎么保存这个数据呢？
2，原先打算使用options.remove(i)，但是ie支持，ff不支持。囧。add(new Optino(value,value));却都支持。对于js菜鸟来说，不支持就没辄了。。
附上昨天晚上的js代码：
<script type="text/javascript" language="javascript">
            $(function(){
                $("#From,#To").change(function(){
                    if ($(this).val() == "0") {
                        $("#From,#To").children("span").each(function(){
                            $(this).children().clone().replaceAll($(this));
                        });
                    }
                    else {
                        var that = this;
                        setTimeout(function(){
                             $("#From,#To")
                            .children("option[parentid][parentid!='" + $(that).children("[value='" + $(that).val() + "']").attr("parentid") + "']")
                            .wrap("<span style='display:none'></span>");
                        },200);
                       
                    }
                });
            });
        </script>

解决方案 »

  1.   

    昨天晚上的代码中，部署到项目里，ie第一次访问的时候点击不起做用。算了，cj，能否帮我看看我那两个问题
      

  2.   

    囧，发现var acctto = document.getElementById("To");
    acctto.options[i] = null;  可以把option删除。那么就剩下第一个问题了，怎么把原始得到的select数据保存下来。方便删除后，恢复到原来的所有选项呢？
      

  3.   


    var acctto = document.getElementById("To"); 
    var list = acctto.innerHTML;汗，这段代码只能在方法里有值。这样的话就达不到我取全部值的需要了，毕竟当第一次remove了一个option后，再进方法取到的是remove后的数据，并不是remove前的数据。
      

  4.   

    看的云山雾罩的，呵呵。
    1、直接一点吧：你想在页面加载后保存谁？是FROM还是TO?我假设是FROM:<script>
    var bakSelect=null;//select "From" bakup object
    function restoreSelect(){
      var div=document.getElementById("divFrom")
      div.innerHTML=''; 
      div.appendChild(bakSelect);  
    }window.onload=function(){
      bakSelect=document.getElementById("From").cloneNode(true)
    }
    </script>
    <body>
    <div id=divFrom>
    <select id="From"> 
    <option selected="selected" value="0">Please Select</option> 
    <option value="hkd`001" >hkd`001</option> 
    <option value="cny`001" >cny`001</option> 
    <option value="hkd`002" >hkd`002</option> 
    <option value="cny`002" >cny`002</option> 
    </select> 
    </div>
    <div id=divTo>
    <select id="To"> 
    <option selected="selected" value="0">Please Select</option> 
    <option value="hkd`001" >hkd`001</option> 
    <option value="cny`001" >cny`001</option> 
    <option value="hkd`002" >hkd`002</option> 
    <option value="cny`002" >cny`002</option> 
    </select> 
    </div>
    <input type=button value="恢复SELECT 'FROM'" onclick="restoreSelect();">
    </body>
    2、没看懂，呵呵
      

  5.   

    好久不见雅典娜
    <select id="From"> 
    <option selected="selected" value="0">Please Select</option> 
    <option value="hkd`001" >hkd`001</option> 
    <option value="cny`001" >cny`001</option> 
    <option value="hkd`002" >hkd`002</option> 
    <option value="cny`002" >cny`002</option> 
    </select> 
    <select id="To"> 
    <option selected="selected" value="0">Please Select</option> 
    <option value="hkd`001" >hkd`001</option> 
    <option value="cny`001" >cny`001</option> 
    <option value="hkd`002" >hkd`002</option> 
    <option value="cny`002" >cny`002</option> 
    </select> 
    <input type="button" value="取消" onclick="restoreState(document.getElementById('From')); restoreState(document.getElementById('To'))">
    <script type="text/javascript">
    function restoreState(sel){
    var original = eval("window.data_" + sel.id);
    if(!original) return;
    sel.options.length = 0;
    sel.innerHTML = "";
    for(var i=0;i<original.length;i++){
    sel.options.add(new Option(original[i][1], original[i][0]));
    sel.options[i].selected = original[i][2];
    }
    }
    function saveState(sel){
    if(typeof eval("window.data_" + sel.id)=="undefined") eval("window.data_" + sel.id + "=[];");
    var original = eval("data_" + sel.id);
    original.length = 0;
    for(var i=0;i<sel.options.length;i++){
    original[i] = [sel.options[i].value, sel.options[i].text, sel.options[i].selected];
    }
    }
    onload = function (){
    var sel = document.getElementById("From");
    sel.options[2].selected = true;
    saveState(sel);
    sel = document.getElementById("To");
    sel.options[3].selected = true;
    saveState(sel);
    }</script>
      

  6.   

    谢谢toury
    页面的onload方法是不能随便设置的。因为项目有已经定义了。
      

  7.   

    哦，这样啊。那就把脚本移到文档尾部去：.........................
    .........................
    </body>
    </html>
    <script>
    function restoreSelect(){
      var div=document.getElementById("divFrom")
      div.innerHTML='';   div.appendChild(bakSelect);  
    }
    //select "From" bakup object
    var bakSelect=document.getElementById("From").cloneNode(true);
    </script>
      

  8.   

    <html><head>
    <script type="text/javascript">
     
    function fnOld(){
       alert('fnOld');
    }
    function fnNew(){
      alert('fnNew');
    }
     
    </script>
    </head><body onload='fnOld()'>
    </body>
    <script type="text/javascript">
    if (window.addEventListener){
       window.addEventListener('load', fnNew,true);
    } else if (window.attachEvent){
       window.attachEvent('onload', fnNew);
    }
    </script></html>