Question

我有一个测试输入表单，其中根据父选择框中的一个选项的值创建子选择框。选择父选择框中的任何其他选项应该删除子项。它有效，但只有一次。如果第二次创建子选择框，则不会通过选择其中一个选项来删除它。

以下是代码：

<html> 
<SCRIPT LANGUAGE="JavaScript">
function createtext(){
var var1 = document.getElementById('s');
var var2=var1.value;

if (var2 == "American Express")
{
var selector = document.createElement('select');
selector.id = 'gift';
selector.name = 'gift';
selector.size = '2';
myform.appendChild(selector);

var option = document.createElement('option');
option.value = '0';
option.appendChild(document.createTextNode('Gift card'));
selector.appendChild(option);

option = document.createElement('option');
option.value = '1';
option.appendChild(document.createTextNode('Fully owned card'));
selector.appendChild(option);

}
else
{
myform.removeChild(gift);

}
}
</SCRIPT>
</HEAD>
<BODY >
<form action="" method="get" name="myform">
<SELECT id = "s" name="s" size=3 onChange="createtext()" ><OPTION>Visa    Card<OPTION>Mastercard<OPTION>American Express</SELECT>
</form>
</html>

在这里它正在行动...... http://www.crazyforstamps.com/test-form-6.htm

Answer 1

尝试

var gel = document.getElementById('gift');
if(gel){
    myform.removeChild(gel);
}

更新

<!DOCTYPE html>
<html>

  <head>
    <script>

        function createtext() {
            var var1 = document.getElementById('s');
            var var2 = var1.value;

            if (var2 == "American Express") {
                var selector = document.createElement('select');
                selector.id = 'gift';
                selector.name = 'gift';
                selector.size = '2';
                myform.appendChild(selector);

                var option = document.createElement('option');
                option.value = '0';
                option.appendChild(document.createTextNode('Gift card'));
                selector.appendChild(option);

                option = document.createElement('option');
                option.value = '1';
                option.appendChild(document.createTextNode('Fully owned card'));
                selector.appendChild(option);

            } else {
                <!--myform.removeChild(gift);
                var gel = document.getElementById('gift');
                if (gel) {
                    myform.removeChild(gel);
                }

            }
        }

    </script>
  </head>

  <body>

<form action="" method="get" name="myform">
    <SELECT id="s" name="s" size=3 onChange="createtext()">
        <OPTION>Visa Card</OPTION>
        <OPTION>Mastercard</OPTION>
        <OPTION>American Express</OPTION>
    </SELECT>
</form>

  </body>

</html>

演示：Plunker

Answer 2

假设您在某个地方定义了gift，我在问题中没有看到它。

删除所有子元素

var gift = document.getElementById("gift");
while (gift.firstChild) {
    gift.removeChild(gift.firstChild);
}

或者另一种方法是简单地将innerHTML分配给空字符串

var gift = document.getElementById("gift");
gift.innerHTML = '';

Answer 3

首先，您必须记住，每个浏览器都有自己的js编译器。有些人可以使用属性而无需通过JS获取浏览器dom元素，只需引用它们的名称即可。但是为了编写所有支持浏览器的代码，你必须记住JS规范。在JSFiddle上的当前示例中，在尝试对其执行任何操作之前，必须始终获取元素。

      var myform = document.getElementById('myform');
      var gift = document.getElementById('gift');

removeChild只能运行一次

3 个答案: