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

Question

僅在文本框中提供任何值時，我才需要顯示下拉菜單，否則應該隱藏下拉菜單。 我用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';
    }
}

有什么建議我應該怎么做才能使其起作用？

Answer 1

對於初學者，您不需要處理程序中的“ 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';
}

完成這些更改后，它似乎正在工作 。 盡管很奇怪，這是在input的click事件中發生的。 也許您是說變更事件？ 甚至是按鍵事件？

Answer 2

您需要將函數與輸入框的oninput事件綁定

另外，您還需要在頁面加載時最初隱藏下拉菜單。

 var getTextBox = document.getElementById('textboxId'); var getDropDown = document.getElementById('dropdownId'); onTextboxChange(); function onTextboxChange() { if (getTextBox.value != null && getTextBox.value != '') { getDropDown.style.display = 'inline-block'; } else { getDropDown.style.display = 'none'; } } 

 #textboxId { display:inline-block; position:absolute; top:0px; left:10px; } select { display:inline-block; position:absolute; top:0px; left:250px; } 

 <input type="text" name="example_textbox" id="textboxId" oninput="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>