-3

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

这是代码：

<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

4

3 回答 3

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

于 2013-09-17T13:27:47.240 回答
0

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

      var myform = document.getElementById('myform');
      var gift = document.getElementById('gift');
于 2013-09-17T13:40:57.960 回答
0

假设您已经定义gift了我在问题中看不到的某个地方。

删除所有子元素

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

或者另一种选择是简单地将 innerHTML 分配给一个空字符串

var gift = document.getElementById("gift");
gift.innerHTML = '';
于 2013-09-17T13:35:24.697 回答