Php 清除文本框字段后再次加载选择框

我有一个选择框和一个文本框来搜索选择框中的列表。使用PHP从数据库填充选择框。我在这里试图实现的是，一旦清除文本字段；选择框应刷新。我必须重新加载整个页面才能这样做。下面是我用来搜索选择框的小脚本

function filterSelectBox(filterButton) {
    var searchValue = document.getElementById('selectFilter').value.toLowerCase();
    var selectField = document.getElementById("domainID");
    var optionsLength = selectField.options.length;

    for(var i = 0; i < optionsLength; i++) {
        if(selectField.options[i].innerHTML.toLowerCase().indexOf(searchValue) >= 0) {
            selectField.options[i].style.display = 'block';
        } else {
            selectField.options[i].style.display = 'none';
        }
    }
}

功能过滤器选择框（过滤器按钮）{
var searchValue=document.getElementById（'selectFilter'）.value.toLowerCase（）；
var selectField=document.getElementById（“域ID”）；
var optionsLength=selectField.options.length；
对于（变量i=0；i=0）{
selectField.options[i].style.display='block'；
}否则{
selectField.options[i].style.display='none'；
}
}
}

下面是与代码关联的HTML元素

<div class="search_domains" id="search_domains">
    <input type="text"  id="selectFilter" name="selectFilter" />
    <input type="button" id="filterButton" value="Filter" onClick="filterSelectBox(this)"/>
</div>

这就是我填充选择框的方式

<select name="domainID" id="domainID" size="15" style="width:175">
        <option>Select a Domain</option>
        <? foreach ($domains as $row) {
        ?>
        <option value="<?=$row -> id ?>"><?=$row -> domain ?></option>
        <? } ?>
    </select>

选择一个域
我在这里要做的是使用来自同一个PHP文件的AJAX填充列表，但让它输出JSON。加载页面时，AJAX请求将加载php文件，获取JSON并在列表中添加项目

要在文本字段为空时进行刷新，可以使用onChange或onKeyUp并检查值的
长度

我认为所有这些在jQuery或任何JS框架中都比纯JS要简单得多：）

这些措施将有助于：






您当然可以使用AJAX，但对于本例，可能没有必要使用AJAX。只将原始内容存储在Javascript数组中，并在需要时重置它可能更有效。我实际上会删除这些选项，而不是隐藏它们：

<script type="text/Javascript">
    var originalOptions = {<?php $echo = array(); foreach ($domains as $row) $echo[] = "\"{$row->id}\":\"{$row->domain}\""; echo implode(", ", $echo); ?>};

    function filterSelectBox(text)
    {
        var selectField = document.getElementById('domainID');
        selectField.options.length = 0;

        for (var key in originalOptions)
        {
            if (originalOptions[key].substr(0, text.length) == text)
            {
                var option = document.createElement("option");
                option.value = key;
                option.text = originalOptions[key];
                selectField.add(option, null);
            }
        }
    }
</script>
<select name="domainID" id="domainID" size="15" style="width:175">
    <?php foreach ($domains as $row) {
        echo "\t<option value=\"{$row->id}\">{$row->domain}</option>\n";
    } ?>
</select>

<input type="text" onkeyup="filterSelectBox(this.value)" />


var originalOptions={}；
函数过滤器选择框（文本）
{
var selectField=document.getElementById（'domainID'）；
选择field.options.length=0；
for（原始选项中的var键）
{
if（originalOptions[key].substr（0，text.length）==text）
{
var option=document.createElement（“选项”）；
option.value=键；
option.text=原始选项[key]；
选择field.add（可选，空）；
}
}
}
请输入以下代码：

document.getElementById('selectFilter').onkeyup = function() {
    if(this.value.length == 0) {
        var selectField = document.getElementById("domainID");
        var optionsLength = selectField.options.length;

        for(var i = 0; i < optionsLength; i++) {
            selectField.options[i].style.display = 'block';
        }
    }
};

document.getElementById（'selectFilter'）。onkeyup=function（）{
if（this.value.length==0）{
var selectField=document.getElementById（“域ID”）；
var optionsLength=selectField.options.length；
对于（变量i=0；i

就在页面中的
标记之前，当您清除文本框值时，它将显示所有选项。
您的问题与代码不匹配，是吗？您应该完全放弃该选项并使用jQuery。是的，你为什么要问这个问题？@AramKocharyan我对jQuery完全陌生；任何提示都很好。该函数何时以及如何调用？他没有删除选项，只是将它们的
display
CSS属性设置为
none
，所以如果文本框的值为空，他只需要在所有元素上将其设置回
block
。@AnthonyGrist:是的，我刚刚意识到了这一点。现在正在编辑我的答案。@AnthonyGrist我添加了一些代码来澄清问题。@user1361350您的问题仍然归结为“我有一些隐藏的
元素，当文本框中的文本被清除时，我如何再次显示它们？”您不需要本答案中提到的任何东西来解决这个问题-您需要一个
change
或
keyup
事件处理程序来检查文本框值的长度，如果需要，循环通过选项元素并将其
display
属性设置回
block
+@AnthonyGrist抱歉，我可能误解了。他说“刷新”，所以我认为有必要重新填充数据。如果它确实归结为显示和隐藏，那么这是微不足道的。