javascript - 如果文本框有值则显示下拉列表

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';
}

完成这些更改后，seems to be working 。尽管奇怪的是，这种情况发生在输入中的点击事件上。也许您指的是更改事件？或者甚至是 keyup 事件？