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。虽然奇怪的是这发生在input的点击事件中。也许你的意思是更改事件？甚至是 keyup 事件？

Answer 2

您需要将该函数与输入框的oninput事件绑定

此外，您需要在页面加载时隐藏最初的下拉列表。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果文本框的值为

2 个答案: