Question

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

<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中动态设置名称属性的最后一次更改。

有人能帮我找出原因吗？

Answer 1

我是jQuery的大力倡导者;看看使用这个代码，它允许不引人注目的javascript和简化代码（并且它具有免费的跨浏览器兼容性）。

例如，我可以使用：

选择控件对象的父级

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

然后有一个名为replaceWith

的可爱命令

允许我写：

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

这一行将把元素的整个内容替换为您想要的内容。

Answer 2

仅供参考，我使用ID而不是名称来解决问题。功能变为：

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

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

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

IE中的Javascript remove / addChild问题

2 个答案: