当从下拉菜单中选择某些项目时，会出现不断变化的文本框/下拉菜单

Question

目前在我的代码中，我有一个下拉菜单。 此下拉菜单具有三个可供用户选择的选项。 如果选中，完成需要有一个文本框出现。 放弃需要有一个下拉菜单才能显示。 然后传输以相同的方式工作。 还需要为它显示一个下拉菜单。

我的第一个下拉列表的 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';

}

Answer 1

这是一个简单的解决方案：

您可以在您的选择下方添加一个带有 ID 的空div ，并根据用户所做的选择使用您想要显示的 HTML 更改该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>

Answer 2

您可以提供所有隐藏元素类，并在 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 代码https://jsfiddle.net/jpj42ojz/