ie6.0, FF2.0 父子窗体 select js 操作

环境： ie6.0, FF2.0

操作流程：点击 父窗体A 某图片 打开子窗体 B，点击子窗体B中的数据，关闭子窗体B，用点击的数据填充父窗体中的select元素。

代码：

function brickOnClick(index){
try{
   if (window.opener) {
    //get my frequencely bricks used
    var segmentNode = document.getElementById("segmentNode_" + index);
    var segmentName = document.getElementById("segmentName_" + index);
    var familyNode = document.getElementById("familyNode_" + index);
    var familyName = document.getElementById("familyName_" + index);
    var classNode = document.getElementById("classNode_" + index);
    var className = document.getElementById("className_" + index);
    var brickNode = document.getElementById("brickNode_" + index);
    var brickName = document.getElementById("brickName_" + index);
    var brickCode = document.getElementById("brickCode_" + index);
  
    //get select-objects from product tree page .
    var segmentOpener = window.opener.document.getElementById("segment");
    var familyOpener = window.opener.document.getElementById("family");
    var classOpener = window.opener.document.getElementById("class");
    var brickOpener = window.opener.document.getElementById("brick");
  
    //clear all options of parent window
    segmentOpener.options.length = 0;
    familyOpener.options.length = 0;
    classOpener.options.length = 0;
    brickOpener.options.length = 0 ;
  
    //set my frequencely GPC Tree selected
    //var opt = new Option(segmentName.value, segmentNode.value);//IE6 not support in parent-child window.
    var opt_segment = window.opener.document.createElement('option');
    var opt_family = window.opener.document.createElement('option');
    var opt_class = window.opener.document.createElement('option');
    var opt_brick = window.opener.document.createElement('option');
  
    opt_segment.text = segmentName.value;
    opt_segment.value = segmentNode.value;
    opt_family.text = familyName.value;
    opt_family.value = familyNode.value;
    opt_class.text = className.value;
    opt_class.value = classNode.value;
    opt_brick.text = brickName.value;
    opt_brick.value = brickNode.value;
    //add option
    //segmentOpener.add(opt_segment);//w3c DOM, FF2.0 not support
    //familyOpener.add(opt_family);//w3c DOM, FF2.0 not support
    //classOpener.add(opt_class);//w3c DOM, FF2.0 not support
    //brickOpener.add(opt_brick);//w3c DOM, FF2.0 not support
  
    segmentOpener.options.add(opt_segment);//IE6.0,FF2.0
    familyOpener.options.add(opt_family);//IE6.0,FF2.0
    classOpener.options.add(opt_class);//IE6.0,FF2.0
    brickOpener.options.add(opt_brick);//IE6.0,FF2.0
  
    //set selected status
    segmentOpener.options[0].selected = true;
    familyOpener.options[0].selected = true;
    classOpener.options[0].selected = true;
    brickOpener.options[0].selected = true;
  
    //save selected brick info to parent page
    var hddSegmentNodeOpener = window.opener.document.getElementById("segmentNode");
    var hddSegmentNameOpener = window.opener.document.getElementById("segmentName");
    var hddFamilyNodeOpener = window.opener.document.getElementById("familyNode");
    var hddFamilyNameOpener = window.opener.document.getElementById("familyName");
    var hddClassNodeOpener = window.opener.document.getElementById("classNode");
    var hddClassNameOpener = window.opener.document.getElementById("className");
    var hddBrickNodeOpener = window.opener.document.getElementById("brickNode");
    var hddBrickNameOpener = window.opener.document.getElementById("brickName");
    var hddBrickCodeOpener = window.opener.document.getElementById("brickCode");
  
    hddSegmentNodeOpener.value = segmentNode.value;
    hddSegmentNameOpener.value = segmentName.value;
    hddFamilyNodeOpener.value = familyNode.value;
    hddFamilyNameOpener.value = familyName.value;
    hddClassNodeOpener.value = classNode.value;
    hddClassNameOpener.value = className.value;
    hddBrickNodeOpener.value = brickNode.value;
    hddBrickNameOpener.value = brickName.value;
    hddBrickCodeOpener.value = brickCode.value;
 
   }
} catch (error) {
   //alert(error);

 

} finally {
   window.close();
}

注意问题：

1。在子窗体创建父窗体的option对象时，一定要使用var opt_segment = window.opener.document.createElement('option'); 否则 ie6 报JS错误。在父子不能使用 常见的new Option(value,key);来为父窗体的 select 对象创建子项。

2。追加 option为 select 选项时，不能使用 selectObj.add(opt_segment ); FF 不支持这种方法，资料上说这是W3C DOM标准语法，偶一开始也上当了，IE6下没有问题的。

3。清空 父窗体的select 所有选项，与常用的方法相同 父窗体selectObj.options.length = 0;

4。JS 下的try-catch-finally 偶也是第一次用，为了确保子窗体能够在任何情况下关闭，把关闭窗体的语句写在了finally 之下了。

 

---------------------------------------------------------------------测试

father.aspx：

script language="javascript"  type="text/javascript">
        function show(){ alert(document.getElementById("fa").options.length);}
</script>
        <asp:DropDownList ID="fa" runat="server">
            <asp:ListItem Value="0">item1</asp:ListItem>
        </asp:DropDownList>
        <%--<select id="fa">
            <option>item1</option>
            <option>item2</option>
        </select>--%>
        <input id="Button1" type="button" value="show" onclick="show()" />
        <a href="son.aspx" target="_blank">to son</a>
        <span id="sp"></span>
  

 

son.aspx：

script language="javascript"  type="text/javascript">
        function change()
        {
            var select=opener.document.getElementById("fa");
            var sp=opener.document.getElementById("sp");
            var Text1=document.getElementById("Text1");
            var count=select.options.length;
            var varItem = window.opener.document.createElement('option')
             varItem.text=Text1.value;
             varItem.value=count; 
             select.options.add(varItem);
        }
    </script>

        <input id="Text1" type="text" />
        <input type="button" value="change" onclick="change()" />