Question

我正在使用滑动菜单（select / object html one），它是通过使用jsp页面从数据库中获取数据而动态生成的。

我还有一个输入文本字段，我可以从滑动菜单中搜索内容。我想写一个菜单中包含的单词的根，我的菜单必须“调整大小”，显示我写过的所有项目，只有那些。

我不能使用服务器端操作（比如通过post发送数据）但我需要解决这个客户端（因为我需要立即获得这个结果）。

我是否可以仅通过应用于按钮的onclick事件来解决此问题？怎么样？

Answer 1

由于无法隐藏<option> display:none（演示：http://jsfiddle.net/UKseV/ -style正确添加，但它不起作用），我克隆选择对象以存储初始值选项，因为它们将从初始对象中删除。后来我使用克隆的对象来过滤选项，并将符合我条件的选项添加到初始对象中。这是一个代码：

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

使用javascript编辑滑动html菜单

1 个答案: