当multiple select中内容过多,为满足软件的易用性,就需要能有搜索功能
function select_step(){
var list1 = document.getElementById("list1");
var step_name = document.getElementById("step_name").value;
for (var i = 0; i < list1.options.length; i++) {
if (list1.options[i].text.search(step_name) == 0) {
list1.options[i].selected = true;
}else
{
list1.options[i].selected = false;
}
}
}
汗啊,竟然就这么简单。
一开始的思路是 把搜索符合的项 存到一个js数组中,然后再把此数组覆盖 options,这样搜索是成功了,但要搜索选择第二个并进行搜索的时候 我想的也是,将第一次搜索过后的 剩余的options存入一个新的全局变量的数组,然后将此数组内的options一个一个从新加回,但中间老是遇到一个问题:
代码运行到1处的时候正常,但运行到2处全局变量就被改变的!我一直不太清楚这是怎么一回事。搞了许久没搞定,只能寻求他路了!
希望有看出下面代码错误的朋友能给我指正!谢谢!
var temps_options = new Array();//全局变量数组
function select_step(){
var list1 = document.getElementById("list1");
var step_name = document.getElementById("step_name").value;
if (step_name != "") {
var selected_options = new Array();
for (var i = 0; i < list1.options.length; i++) {
if (list1.options[i].text.search(step_name) == 0) {
selected_options.push(list1.options[i])
}
}
temps_options = document.getElementById("list1").options; //将所搜剩余的options放入此数组
alert(temps_options.length);//1
list1.options.length = 0;
for (var j = 0; j < selected_options.length; j++) {
list1.options.add(new Option(selected_options[j].text, selected_options[j].value));
}
alert(temps_options.length)//2
}else{
alert(temps_options[0].text);
list1.options.length = 0;
for(var i=0;i<temps_options.length;i++)
{
list1.options.add(new Option(temps_options[i].text,temps_options[i].value))
}
}
}
分享到:
相关推荐
在el-select组件中,懒加载可以应用于远程搜索的场景,也就是说,当用户在搜索框中输入内容后,根据输入结果动态加载匹配的选项。这不仅可以减少初次加载的数据量,也可以提供更为流畅的用户交互体验。 实现el-...
在大型数据集或选项过多的情况下,为`<select>`添加搜索框功能是非常实用的。这可以帮助用户快速找到他们想要选择的特定选项,提高用户体验。实现这一功能通常需要借助JavaScript库,如jQuery UI的Autocomplete插件...
4. **无限滚动**:当选项过多时,select2 实现了无限滚动的效果,用户可以滚动浏览选项,而无需打开一个巨大的下拉菜单。这样减少了屏幕空间的占用,同时保持了良好的可操作性。 **标签解析:** "select2" 这个...
然而,当选项过多时,如上千条,传统的`select`下拉框会变得难以操作。为了解决这个问题,我们可以引入“模糊查询”功能,即用户在输入框中输入关键词,系统会快速过滤出匹配的选项。这样极大地提高了用户体验和查找...
- `demo.html`: 这是一个示例文件,展示了如何在实际项目中使用Select2插件,包括基本配置和功能的实现。 - `bootstrap`: Bootstrap是一个流行的前端框架,可能在这个压缩包中用于提供样式支持,使Select2与...
JavaScript 技术: select2控件选择多个数据,以及回显数据的方法 。
- **动态加载**:当选项过多时,可以设置为动态加载,只在需要时才获取数据,优化性能。 - **远程数据源**:通过AJAX或自定义数据源,Select2可以从服务器端获取数据,实现动态下拉框。 - **本地化**:支持多种...
2. 异步加载数据:如果选项过多,可以考虑使用Ajax异步加载数据,只在用户输入时请求匹配的数据。 3. 提供拼音提示:在输入框下方显示当前输入的拼音,帮助用户确认他们的搜索关键词。 总结,通过结合Select2的强大...
3. **无限滚动**:当选项过多时,select2.js会自动加载更多选项,避免一次性加载所有数据导致页面卡顿。 4. **自定义模板**:select2.js允许开发者自定义选项的显示样式,包括使用HTML元素和CSS,以适应不同的设计...
在网页开发中,`<select>`元素用于创建一个下拉菜单,用户可以从预定义的选项中选择一个。然而,有时为了实现更复杂的功能或者更好的视觉效果,开发者可能会选择使用JavaScript来模拟`<select>`下拉菜单。这种方法...
3. **无限滚动**:当选项过多时,Select2会自动加载更多选项,避免一次性显示大量数据导致页面卡顿。 4. **自定义模板**:开发者可以定义自己的模板,自定义显示样式,包括选项的显示方式、分组等。 5. **可访问性**...
2. **搜索过滤**:当选项数量过多时,`vue-select`提供了一个内置的搜索框,允许用户输入关键词来筛选符合的选项,提高了用户体验。 3. **分组选项**:可以将选项组织成组,使界面更加有序,便于用户快速找到所需...
3. **无限滚动**:当选项过多时,select2支持结果的无限滚动,用户无需翻页,只需滚动即可查看所有选项,提高了用户体验。 4. **自定义模板**:select2允许开发者定制显示模板,可以根据项目需求自定义每个选项的...
3. **Ajax集成**:如果数据源较大,可以使用Ajax异步加载数据,避免一次性加载过多内容导致页面卡顿。 4. **多选支持**:用户可能需要选择多个选项,插件应提供这种功能,并能够正确处理和显示选中项。 5. **可扩展...
4. **无限滚动**:当选项过多时,`select2`可以实现无限滚动效果,避免一次性加载大量数据导致页面卡顿。 5. **自定义数据源**:除了绑定到`<option>`元素,`select2`还能连接到外部数据源,如Ajax请求,动态加载...
- **无限滚动**:在多选模式下,当选项过多时,Select2 提供了无限滚动功能,用户无需翻页,即可浏览所有选项。 - **可禁用和选中状态**:可以方便地设置选项为禁用或选中状态,满足各种业务场景的需求。 - **自定义...
- **无限滚动:** 当选项过多时,可以实现滚动加载,避免一次性加载所有数据导致页面卡顿。 - **键盘导航:** 用户可以通过键盘上下键快速浏览和选择选项。 3. **使用方法:** - **安装:** 通常通过npm、Yarn ...
4. 滚动效果:当选项过多时,可以实现滚动条,让用户轻松浏览所有选项。 5. 兼容性处理:考虑不同浏览器的兼容性问题,确保在各种环境下都能正常工作。 总结,jQuery自定义Select控件的核心在于使用JavaScript和CSS...
对于大数据量的下拉菜单,应使用异步加载或分页策略,避免一次性加载过多选项导致页面卡顿。同时,确保这些美化后的下拉菜单在各种浏览器和设备上都能正常工作,包括移动设备和平板电脑。 在文件`texiao4748_...