Javascript 输入不为空时隐藏选择标记

更新：谢谢你的回答！ 我似乎不明白，即使有你们发布的功能。这是我使用的代码。还有-我的网站上有jQuery，但我不知道你可以用jQuery来实现

<form method="post" action="" name="items">
    <table>
        <tr>
            <td>Link URL:</td>
                            <td><input type="text" name="item_url" size="25"/></td>
        </tr>
        <tr>
            <td>Link name</td>
            <td><input type="text" name="item_name" size="25" /></td>
        </tr>
                    <tr>
                            <td>Site Name:</td>
                            <td id="site_id">
                                    <select name="item_site_id">
                                            <option value="<?php echo $sites["site_id"]; ?>"><?php echo $sites["site_name"]; ?></option>
                                    </select>
                            </td>                    
                    </tr> (the form contiunes, but only this part is relevant...)

链接URL:
链接名称
网站名称：
由于您没有指定，因此我使用了
onblur
事件，具体时间取决于您希望它发生的时间。您可以用同样的方法使用
onchange
、
onkeydown
、
onclick
等

范例

HTML

<input type="text" onblur="hideSelect(this);" />
<select id="mySelect"></select>

基本示例：


如果你愿意使用它，那就相当容易了

实例：

HTML:

<input type="text" id="myTextInput" />

<select id="mySelectBox">
    <option>One</option>
    <option>Two</option>
</select>

将脚本放入jQuery的
$（document）.ready（）
处理程序中，或者在DOM中的HTML之后加载它

注意：这将在文本框失去焦点时隐藏选择框，而不是立即隐藏。如果您想立即隐藏它，请尝试使用keyUp（）事件处理程序。
@ggreiner，这个问题是否已标记为
jquery
？@Gabe-lightup，这不是第一次错误标记问题。不，OP指的是
jquery
。似乎很清楚。为什么要将
内联
元素设置为
显示
为
块
。不过，在很多情况下，您可能会希望这样做；）特别是为了保存蓬松的HTML标记，但这是另一个主题…很公平，但为了简单起见，我才提出它。@gabe同意，公平地说，我忽略了它，想不出一个我必须制作
input type=“text”
字段
display:block
：）的例子-很好，没问题，你修好了。我只是想看看是否有特别的原因。这个问题没有标记为
jquery
，我知道，但是不是每个人都知道jquery及其提供的优势。问题没有说明他不能使用jQuery。非常感谢！工作就像一个符咒：）
document.getElementsByTagName('input')[0].onchange = function(){
    var select = document.getElementsByTagName('select')[0];

    if(this.value == '')
        select.style.display = 'inline';
    else 
        select.style.display = 'none';
}

<input type="text" id="myTextInput" />

<select id="mySelectBox">
    <option>One</option>
    <option>Two</option>
</select>

$('#myTextInput').change(function(){
    if ($.trim($(this).val()) == '') {
        $('#mySelectBox').show();
    } else {
        $('#mySelectBox').hide();
    }
});