IE中删除/ addChild问题

我有一个带有select和另一个控件的HTML页面。我希望第二个控件的类型根据第一个控件中选择的值动态更改。这里的html代码：IE中删除/ addChild问题

<form name="myForm"> 
    <select name="tagName" 
     onChange="changeControl(document.myForm.customControl, document.myForm.tagName.value, getSelectedText(document.myForm.tagName));"> 
     <option value='F'>Create Input</option> 
     <option value='E'>Create Select</option> 
     <option value='M'>Create Multiple Select</option> 
     <option value='N'>Create Not Editable</option> 
     <option value='C'>Create Configuration Param</option> 
     <option value='D'>Create Date</option> 
     <option value='X'>Create Unknown</option> 
    </select> 

    <br> 
    <br> 

    <div> 
     <input type="hidden" name="customControl" /> 
    </div>

JavaScript函数基本上消除了旧的控制，并增加了一个新的。它目前在Firefox中工作，但不在Internet Explorer中。这是代码。

function changeControl(oldControl, valType, tagName) 
{ 
var newControl; 

var controlParent = oldControl.parentNode; 
var controlName = oldControl.name; 

controlParent.removeChild (oldControl); 

switch(valType) { 
    //IE does not allow name attr to be set later, 
    //so we must use name at creation time; 
    //this way of doing things breaks non-IE browsers 
    //TBD: surround it with try-catch block 
    case 'F': 
     //newControl = document.createElement('input'); //non-IE 
     newControl = document.createElement('input name=' + controlName); 
     newControl.size = 30; 
    break; 

    case 'E': 
    case 'M': 
     newControl = document.createElement('select name=' + controlName); 
     if (valType == 'M') 
      newControl.multiple = "multiple"; 

     var optionStr = sampleArr[tagName]; 
     optionArr = optionStr.split(';'); 

     var optCount = 0; 
     for (i in optionArr) { 
      option = optionArr[i]; 
      newControl.options[i] = new Option(option, option); 
     } 
    break; 

    case 'N': 
    ...  

    default: 
     //unrecognized type 
     newControl = document.createElement('input name=' + controlName); 
     newControl.value = "Unrecognized control type"; 
     newControl.size = 30; 
     newControl.style.border = "0px"; 
     newControl.disabled = "disabled"; 
     //newControl.readonly = "readonly"; 
} 


//newControl.name = controlName; //non-IE 
controlParent.appendChild (newControl); 
} 

function getSelectedText(selectObj) 
{ 
    return selectObj.options[selectObj.selectedIndex].text; 
}

第二次调用changeControl时，oldControl似乎丢失了所有属性。注意最近更改试图在IE中动态设置名称属性。

任何人都可以帮我找出为什么这是坏的？

来源

2010-02-18 AndreaG

从MSDN文档中获得name属性：'Microsoft JScript允许在运行时更改名称。这不会导致编程模型中的名称在元素集合中发生更改，但它确实会更改用于提交元素的名称。看起来你可以在IE中动态地设置一个表单元素的名字，甚至有自己的例子表明它与createElement一起使用。 – 2010-02-18 16:04:58

仅供参考，我使用ID解决了问题，而不是名称。函数变为：

function changeControl(controlId, valType, tagName) 
{ 
    var oldControl, newControl; 

    oldControl = document.getElementById(controlLabel); 
    ... 

    newControl.id = controlLabel; 
    controlParent.appendChild (newControl); 
}

来源

2010-02-22 16:39:32 AndreaG

我是jQuery的大提倡者;看看使用它为你的代码，它允许不引人注意的JavaScript和简化代码（并且它具有免费的跨浏览器兼容性）。

例如，我可以通过使用选择控制对象的父：

var parent = $(control).parent();

然后有一个叫做replaceWith

可爱COMAND其允许我写：

parent.replaceWith("<input type='text' />");

这一行将把元素的全部内容替换为你想要的。

来源

2010-02-18 15:55:59

我很乐意使用它，但我没有权力在当前项目中做出这样的改变。不过谢谢你的提示。 – AndreaG 2010-02-19 08:53:53

IE中删除/ addChild问题

回答

相关问题