当从下拉菜单中挑选某些项目时，出现更改文本框/下拉菜单

当前在我的代码中，我有一个下拉菜单。该下拉菜单有三个用户可以选择的选项。完全需要有一个文本框，如果它被选中。放弃需要有一个下拉菜单来显示。然后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'; 

}

在此先感谢您的帮助！

来源

2016-09-14 tbrock29

您可以给所有隐藏的元素类和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/

来源

2016-09-14 22:53:54

在这里工作的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>

来源

2016-09-14 22:55:42 kkreft

当从下拉菜单中挑选某些项目时，出现更改文本框/下拉菜单

回答

相关问题