如果文本框有值，則顯示下拉菜單

只有在文本框中提供了任何值時，我才需要顯示下拉菜單，否則應該隱藏下拉菜單。我用javascript嘗試了下面的代碼，但它不工作。使用此代碼時，如果在文本框字段中沒有鍵入值，則不會隱藏下拉列表。它始終顯示。如果文本框有值，則顯示下拉菜單

<input type="text" name="example_textbox" id="textboxId" onclick="javascript:onTextboxChange()" > 

<select name="example_dropdown" id="dropdownId" > 
    <option selected value="0">Select One</option> 
    <option value="Option1">Option1</option> 
    <option value="Option2">Option2</option> 
    <option value="Option3">Option3</option> 
     </select> 

<script type="text/javascript"> 
var getTextBox = document.getElementById('textboxId'); 
var getDropDown = document.getElementById('dropdownId'); 

function onTextboxChange(){ 
    if (getTextBox.value != null) 
     { 
     getDropDown.disable='false'; 
     //getDropDown.style.display = 'inline'; 
     } 
    else{ 
     //getDropDown.style.display = 'none'; 
     getDropDown.disable='false'; 
    } 
}

任何建議我應該怎麼做才能使它工作？

來源

2016-08-30 TechPro

放警報（getTextBox.value）;到你的函數的開始，看看它的價值。很可能它是''，換句話說，是空字符串，但不是空。 –

順便說一句，使用style.display是正確的。 –

對於初學者來說，你並不需要在處理程序「的JavaScript」部分：

<input type="text" name="example_textbox" id="textboxId" onclick="onTextboxChange()" >

你可能還需要檢查對空字符串，而不僅僅是null還有：

if (getTextBox.value != null && getTextBox.value != '')

我不確定disable屬性（更不用說這兩個條件都將其設置爲相同的值），但是您的樣式更改有效：

if (getTextBox.value != null && getTextBox.value != '') { 
    getDropDown.style.display = 'inline'; 
} else { 
    getDropDown.style.display = 'none'; 
}

隨着這些變化，它seems to be working。雖然奇怪的是發生這種情況，請點擊事件input。也許你的意思是更改事件？甚至是鍵盤事件？

來源

2016-08-30 19:07:15 David

我只想補充一點，當你選擇一個要監視的事件時，如果你想立即反應輸入中的第一個字符，你將無法使用更改。直到編輯完成（即焦點丟失），更改事件纔會觸發。 – DLH

我按照你的建議添加了條件檢查。現在，發生的事情就像你在小提琴上展示的一樣，當表單加載時，文本框和下拉菜單都會顯示出來，但是當我點擊文本框時，下拉菜單又會隱藏起來。我不需要顯示下拉列表，直到我點擊文本框輸入值。當我嘗試輸入值時，下拉列表不應該被隱藏。任何建議？ – TechPro

@TechPro：將其設置爲默認隱藏。使用CSS或內聯樣式。例如：'

如果文本框有值，則顯示下拉菜單

回答