Question

更新：感谢您的回答！我似乎无法弄清楚，即使有你们发布的功能。这是我使用的代码。另外 - 我的网站上有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...)

基本上我想这样做，当用户在“LINK URL”行（输入名称item_url）中输入任何内容时，SELECT标记（site_id）就会消失。再次感谢帮助我：）

EDIT2：已解决，感谢您的帮助！还有一个问题 - 如何跟踪SELECT？我想这样做，如果用户更改了select，则item_url和item_name将消失。那可能吗？

Answer 1

基本示例：

http://jsfiddle.net/NDSE3/

document.getElementsByTagName('input')[0].onchange = function(){
    var select = document.getElementsByTagName('select')[0];

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

Answer 2

根据您希望何时发生，因为您未指定我使用了onblur event。您可以以相同的方式使用onchange，onkeydown，onclick等。

jsFiddle示例

<强> HTML

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

<强>的Javascript

function hideSelect(txt){

    if(txt.value.length == 0){
        document.getElementById('mySelect').style.display = "none";
    }
    else{
       document.getElementById('mySelect').style.display = "inline";
    }

}

Answer 3

如果你愿意使用jQuery，这很容易。

实例：http://jsfiddle.net/justrhysism/hnuHQ/

HTML：

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

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

jQuery

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

将脚本放在jQuery的$(document).ready()处理程序中，或者只是在DOM中的HTML之后加载它。

注意：当文本框失去焦点时，这将隐藏选择框，而不是立即隐藏。如果要立即隐藏它，请尝试使用keyUp（）事件处理程序。

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

3 个答案: