1

選択ボックスと、選択ボックス内のリストを検索するためのテキスト ボックスがあります。選択ボックスは、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';
        }
    }
}

コードに関連付けられた 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>
4

3 に答える 3

0

このコードを入れてください：

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

ページのタグの直前に</body>、テキストボックスの値をクリアするとすべてのオプションが表示されます。

于 2012-04-27T15:19:13.440 に答える
0

ここで行うことは、同じ PHP ファイルからリストに AJAX を入力し、JSON を出力することです。ページのロード時に、AJAX リクエストは php ファイルをロードし、JSON を取得してリストに項目を追加します。

テキスト フィールドが空白の場合に更新するには、onChange または onKeyUp を使用しlengthて値を確認します。

これはすべて、純粋なJSよりもjQueryまたは任意のJSフレームワークではるかに簡単になると思います:)

これらは役立ちます：

于 2012-04-27T14:48:57.860 に答える
0

もちろん 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)" />
于 2012-04-27T14:51:19.177 に答える