当从下拉菜单中选择某些项目时，会出现更改文本框/下拉菜单的情况。
当从下拉菜单中选择某些项目时，会出现更改文本框/下拉菜单的情况。
提问于 2016-09-14 22:13:17
目前在我的代码中我有一个下拉菜单。这个下拉菜单有三个选项，用户可以从中选择。如果选择完整，则需要显示文本框。放弃需要有一个下拉菜单来显示。那么转移也是同样的方式。同时也需要显示下拉菜单。
我的第一个下拉列表的HTML代码：
<select name="Action" id="ActionDD" required onchange="showHide()">
<option value="">Action:</option>
<option value="complete">Complete</option>
<option value="abandon">Abandon</option>
<option value="transfer">Transfer</option>
</select>我的文本框的HTML代码，该文本框需要从第一个下拉菜单中完全选中。
<input type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" maxlength="10" style="display:none;"/>我需要从第一个下拉菜单中任意选择的下拉菜单的HTML代码。
<select name="Reason" id="ReasonDD" style="display:none;" required>
<option value="">Reason:</option>
<option value="NoShow">No Show</option>
<option value="Unfixable">Unfixable</option>
<option value="other">Other</option>
</select>最后，我的JavaScript代码就是执行这些任务。但是，当我从第一个下拉菜单中选择其他东西时，在已经选择了一些东西之后，它将同时显示新的文本框或新的下拉菜单。我需要帮助，让他们两个单独出现，并清除旧的选定行动。
function showHide()
{
var val = document.getElementById("ActionDD").value;
if(val == "complete")
document.getElementById("REMtextBox").style.display = 'inline-block';
else if(val == "abondon")
document.getElementById("ReasonDD").style.display = 'inline-block';
else if(val == "C")
document.getElementById("ThirdTextBoxId").style.display = 'inline-block';
else if(val == "D")
document.getElementById("FourthTextBoxId").style.display = 'inline-block';
}回答 2
Stack Overflow用户
回答已采纳
发布于 2016-09-14 22:53:54
您可以给出所有隐藏元素类，并在showHide函数中首先隐藏所有元素，然后显示您想要的元素。
所以你的js代码
showHide = function()
{
var showHideItems = document.getElementsByClassName('hidden-items');
for(var i =0;i<showHideItems.length;i++){
showHideItems[i].style.display = 'none';
}
var val = document.getElementById("ActionDD").value;
if(val == "complete")
document.getElementById("REMtextBox").style.display = 'inline-block';
else if(val == "abandon")
document.getElementById("ReasonDD").style.display = 'inline-block';
else if(val == "C")
document.getElementById("ThirdTextBoxId").style.display = 'inline-block';
else if(val == "D")
document.getElementById("FourthTextBoxId").style.display = 'inline-block';
}你的html会是
<select name="Action" id="ActionDD" required onchange="showHide()">
<option value="">Action:</option>
<option value="complete">Complete</option>
<option value="abandon">Abandon</option>
<option value="transfer">Transfer</option>
</select>
<input class="hidden-items" type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" maxlength="10" style="display:none;"/>
<select class="hidden-items" name="Reason" id="ReasonDD" style="display:none;" required>
<option value="">Reason:</option>
<option value="NoShow">No Show</option>
<option value="Unfixable">Unfixable</option>
<option value="other">Other</option>
</select>下面是为您编写https://jsfiddle.net/jpj42ojz/代码的工作
Stack Overflow用户
发布于 2016-09-14 22:55:42
以下是一个简单的解决方案：
您可以在选择的下面添加一个ID为ID的空div，并根据用户的选择更改该div的innerHTML。
我编辑了你现有的代码，这样你就能明白我的意思：
function showHide() {
var val = document.getElementById("ActionDD").value;
var remTextBox = document.getElementById("REMtextBox");
var reasonDD = document.getElementById("ReasonDD");
var thirdTextBoxId = document.getElementById("ThirdTextBoxId");
var fourthTextBox = document.getElementById("FourthTextBoxId");
var result = document.getElementById("result");
var remTextBoxHTML = '<input type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" maxlength="10"/>';
var reasonDDHTML = '<select name="Reason" required><option value="">Reason:</option><option value="NoShow">No Show</option><option value="Unfixable">Unfixable</option><option value="other">Other</option></select>';
if(val == "complete") {
result.innerHTML = remTextBoxHTML;
} else if(val == "abandon") {
result.innerHTML = reasonDDHTML;
} else if(val == "C") {
result.innerHTML = '';
} else if(val == "D") {
result.innerHTML = '';
} else {
result.innerHTML = '';
}
}<select name="Action" id="ActionDD" required onchange="showHide()">
<option value="">Action:</option>
<option value="complete">Complete</option>
<option value="abandon">Abandon</option>
<option value="transfer">Transfer</option>
</select>
<div id="result">
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39500443
复制相关文章
相似问题
腾讯云开发者
