Question

我正在构建一个工具，在选择下拉框中的值时会填充其他字段。因此，如果选择了假设（a），则表格中显示2 3和4，但如果选择了（b）字段2 3 4以及其他字段5和6也被添加。现在我正在努力使用两种形式，一种是字段2 3和4，另一种是2 3 4 5和6.取决于值的选择从下拉列表（a或b）中显示/隐藏任何表格。

但它并没有像预期的那样。

html是

<html>
<head>
<title>My Page</title>
</head>
<body>
<center><h1>URL Builder</h1></center>
<div align="center">
<select id ="Type1" name="Aoldropdown">

<option value="Fixed">Fixed Ad Units</option>
<option value="Scrolled">Scrolled Ad Units</option>
<option value="Custom">Custom Ad Units</option>
</select>
<form name="Aolform" id ="aol1" action="/URLBuilder/URLRetriever" method="GET">

<select name="Sizedropdown">
<option value="300x1050">300x1050</option>
<option value="300x600">300x600</option>
<option value="300x250">300x250</option>
<option value="728x90">728x90</option>
<option value="970x250">970x250</option>
<option value="320x50">320x50</option>
<option value="768x90">768x90</option>
<option value="1024x90">1024x90</option>

</select>

<br></br>
  Base URL:<input type="text" name="baseURL"><br>
  Title Number:<input type="text" name="titleNo"><br>
  Placement ID: <input type="text" name="placementId"><br>
  Flight ID: <input type="text" name="flightId"><br>
  <input type="submit" value="Retrieve URL">
<!-- input type = "submit" Value ="Select URL Type"-->
</div>
</form>
<form name="Aolform2" id ="aol2" action="/URLBuilder/URLRetriever" method="GET">

<select name="Sizedropdown">
<option value="300x1050">300x1050</option>
<option value="300x600">300x600</option>
<option value="300x250">300x250</option>
<option value="728x90">728x90</option>
<option value="970x250">970x250</option>
<option value="320x50">320x50</option>
<option value="768x90">768x90</option>
<option value="1024x90">1024x90</option>

</select>

<br></br>
  Placement ID: <input type="text" name="placementId"><br>
  Flight ID: <input type="text" name="flightId"><br>
  <input type="submit" value="Retrieve URL">
<!-- input type = "submit" Value ="Select URL Type"-->
</div>
</form>
<script type ="text/javascript">
var forms = document.forms['Aolform'];
//console.log(forms);
//console.log(forms.elements);
document.getElementById("Type1").addEventListener("onchange",onDropDownChange,true);

if(document.getElementById("Type1").value =='Custom'){ 

    document.getElementById('aol1').style.visiblity='visible';
    document.getElementById('aol2').style.visibility='hidden';


        }
    else
        {
        document.getElementById('aol2').style.visibility='visible';
        document.getElementById('aol1').style.visibility='hidden';

        }

</script>
</body>
</html>

请帮我解决这个问题。我还有其他任何办法吗？

由于斯瓦拉杰

Answer 1

结帐this fiddle。我做了一些更改，首先使用onchange而不是change。你也引用了一个不存在的函数onDropDownChange()，所以我把你的条件置于其中：

function onDropDownChange() {
    if (document.getElementById("Type1").value == 'Custom') {
        document.getElementById('aol1').style.display = 'none';
        document.getElementById('aol2').style.display = 'block';
    } else {
        document.getElementById('aol2').style.display = 'none';
        document.getElementById('aol1').style.display = 'block';
    }
}

我还更改了使用style.display代替style.visibility的功能，以便在显示时没有第二个表单上方的间隙。

Answer 2

是的，有很多方法可以做你想做的事，但我会根据你到目前为止所做的事给你一个直接的答案。您的脚本不正确，因为事件OnChange未触发条件。试试这样：

document.getElementById("Type1").onchange = function() {
    if(document.getElementById("Type1").value =='Custom'){ 
        document.getElementById('aol1').style.visiblity='visible';
        document.getElementById('aol2').style.visibility='hidden';
    }
    else
    {
        document.getElementById('aol2').style.visibility='visible';
        document.getElementById('aol1').style.visibility='hidden';
    }
}

但你应该检查你的“if”条件的行为，看看你是否真的想要这样做。

基于下拉框填充表单

2 个答案: