0

私はスライディングメニュー（select / object html one）を使用しています。これは、jspページを使用してDBからデータを取得することによって動的に生成されます。

スライドメニューから検索できる入力テキストフィールドもあります。メニューに含まれている単語のルートを書きたいのですが、メニューを「サイズ変更」して、自分が書いたルートを持つすべてのアイテムと、それらのアイテムのみを表示する必要があります。

サーバー側の操作（郵便でデータを送信するなど）を使用することはできませんが、このクライアント側を解決する必要があります（この結果がすぐに必要になるため）。

ボタンにonclickイベントを適用するだけでこの問題を解決できますか？そしてどうやって？

4

1 に答える 1

1

このデモを参照してください：http：//jsfiddle.net/UKseV/8/

<option>withを非表示にすることはできないためdisplay:none（デモ：http：//jsfiddle.net/UKseV/-styleは正しく追加されますが、機能しません）、selectオブジェクトを複製して初期オプションを保存します。これは、初期オプションから削除されるためです。物体。その後、その複製されたオブジェクトを使用してオプションをフィルタリングし、条件に一致するオプションを初期オブジェクトに追加します。コードは次のとおりです。

HTML：

<select multiple id="testSelect">
<option>test</option>
<option>temp</option>
<option>cast</option>
<option>dest</option>
<option>inst</option>
</select>

<input type="text" value="" onkeyup="searhSelect(this)" />​

searhSelect関数は、キーを押すたびに（ユーザーが実際にキーを離したときに）呼び出され、#testSelectオブジェクトをフィルタリングします。

JS：

var optionsList;
function searhSelect(el) {
    var select = document.getElementById('testSelect');
    if(!optionsList) {        
        optionsList = select.cloneNode(true);  //copy select to a variable for future use      
    }
    select.innerHTML = "";//remove all options.

    for(var i =0; i < optionsList.options.length; i++) {
        var opt = optionsList.options[i];
        if((opt.innerText || opt.textContent).indexOf(el.value) != -1) {
            select.appendChild(opt.cloneNode(true));
        } 
    }
}

</ p>

于 2012-12-07T10:57:29.820 に答える