當從下拉菜單中挑選某些項目時，出現更改文本框/下拉菜單

當前在我的代碼中，我有一個下拉菜單。該下拉菜單有三個用戶可以選擇的選項。完全需要有一個文本框，如果它被選中。放棄需要有一個下拉菜單來顯示。然後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

當從下拉菜單中挑選某些項目時，出現更改文本框/下拉菜單

回答

相關問題