Javascript удалить / addChild проблема в IE

Question

У меня есть 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

К вашему сведению, я решил проблему, используя идентификаторы вместо имен. Функция становится:

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

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

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