当从下拉菜单中挑选某些项目时,出现更改文本框/下拉菜单
问题描述:
当前在我的代码中,我有一个下拉菜单。该下拉菜单有三个用户可以选择的选项。完全需要有一个文本框,如果它被选中。放弃需要有一个下拉菜单来显示。然后Transfer以相同的方式工作。还需要出现一个下拉菜单。当从下拉菜单中挑选某些项目时,出现更改文本框/下拉菜单
的第一个下拉我的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 type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" maxlength="10" style="display:none;"/>
拿起我的HTML代码我从第一个下拉菜单中选择需要放弃的下拉菜单的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';
}
在此先感谢您的帮助!
答
您可以给所有隐藏的元素类和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>
答
在这里工作的jsfiddle是一个简单的解决方案:
您可以添加一个空的div
,其ID低于您的ID根据用户所做的选择,选择并更改div
中的innerHTML
与您要显示的HTML。
我编辑现有的代码,所以你可以明白我的意思:
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>