Javascript remove/addChild problem in IE
I've got an HTML page with a select and another control. I want the type of the second control to dynamically change depending on the value selected in the first control. Here's the html code:
<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>
The javascript function basically removes the old control, and adds a new one. It currently works in Firefox, but not in Internet Explorer. Here's the code.
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 = "rea开发者_JAVA技巧donly";
}
//newControl.name = controlName; //non-IE
controlParent.appendChild (newControl);
}
function getSelectedText(selectObj)
{
return selectObj.options[selectObj.selectedIndex].text;
}
On the second call to changeControl, oldControl seems to having lost all attributes. Notice the last changes trying to dynamically set name attribute in IE.
Could anyone help me find out why this is broken?
I'm a big advocate of jQuery; look at using this for you code, it allows for unobtrusive javascript and simplification of code (and it has cross-browser compatibility for free).
for example, I can select the parent of the control object by using:
var parent = $(control).parent();
then there is a lovely comand called replaceWith
which allows me to write:
parent.replaceWith("<input type='text' />");
This single line will replaced the entire content of the element to what ever you want.
FYI, I resolved the issue using ids instead of names. Function becomes:
function changeControl(controlId, valType, tagName)
{
var oldControl, newControl;
oldControl = document.getElementById(controlLabel);
...
newControl.id = controlLabel;
controlParent.appendChild (newControl);
}
精彩评论