`
JasonChi
  • 浏览: 94743 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

当select中内容过多时,使用搜索

阅读更多

当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数据过多懒加载的解决(loadmore)

    在el-select组件中,懒加载可以应用于远程搜索的场景,也就是说,当用户在搜索框中输入内容后,根据输入结果动态加载匹配的选项。这不仅可以减少初次加载的数据量,也可以提供更为流畅的用户交互体验。 实现el-...

    select各种效果:select带搜索框 多个option项目选择

    在大型数据集或选项过多的情况下,为`&lt;select&gt;`添加搜索框功能是非常实用的。这可以帮助用户快速找到他们想要选择的特定选项,提高用户体验。实现这一功能通常需要借助JavaScript库,如jQuery UI的Autocomplete插件...

    select2 搜索下拉框插件

    4. **无限滚动**:当选项过多时,select2 实现了无限滚动的效果,用户可以滚动浏览选项,而无需打开一个巨大的下拉菜单。这样减少了屏幕空间的占用,同时保持了良好的可操作性。 **标签解析:** "select2" 这个...

    select下拉模糊查询插件

    然而,当选项过多时,如上千条,传统的`select`下拉框会变得难以操作。为了解决这个问题,我们可以引入“模糊查询”功能,即用户在输入框中输入关键词,系统会快速过滤出匹配的选项。这样极大地提高了用户体验和查找...

    select2(jquery)插件下载

    - `demo.html`: 这是一个示例文件,展示了如何在实际项目中使用Select2插件,包括基本配置和功能的实现。 - `bootstrap`: Bootstrap是一个流行的前端框架,可能在这个压缩包中用于提供样式支持,使Select2与...

    select2控件回显方法

    JavaScript 技术: select2控件选择多个数据,以及回显数据的方法 。

    select2-4.0.12.zip(下拉框带搜索css和js)

    - **动态加载**:当选项过多时,可以设置为动态加载,只在需要时才获取数据,优化性能。 - **远程数据源**:通过AJAX或自定义数据源,Select2可以从服务器端获取数据,实现动态下拉框。 - **本地化**:支持多种...

    select2例子,按拼音检索

    2. 异步加载数据:如果选项过多,可以考虑使用Ajax异步加载数据,只在用户输入时请求匹配的数据。 3. 提供拼音提示:在输入框下方显示当前输入的拼音,帮助用户确认他们的搜索关键词。 总结,通过结合Select2的强大...

    select2.js

    3. **无限滚动**:当选项过多时,select2.js会自动加载更多选项,避免一次性加载所有数据导致页面卡顿。 4. **自定义模板**:select2.js允许开发者自定义选项的显示样式,包括使用HTML元素和CSS,以适应不同的设计...

    JS模拟select下拉菜单

    在网页开发中,`&lt;select&gt;`元素用于创建一个下拉菜单,用户可以从预定义的选项中选择一个。然而,有时为了实现更复杂的功能或者更好的视觉效果,开发者可能会选择使用JavaScript来模拟`&lt;select&gt;`下拉菜单。这种方法...

    select2.zip

    3. **无限滚动**:当选项过多时,Select2会自动加载更多选项,避免一次性显示大量数据导致页面卡顿。 4. **自定义模板**:开发者可以定义自己的模板,自定义显示样式,包括选项的显示方式、分组等。 5. **可访问性**...

    vueselect一个原生Vuejs组件提供类似于的Select2功能

    2. **搜索过滤**:当选项数量过多时,`vue-select`提供了一个内置的搜索框,允许用户输入关键词来筛选符合的选项,提高了用户体验。 3. **分组选项**:可以将选项组织成组,使界面更加有序,便于用户快速找到所需...

    前端项目-select2.zip

    3. **无限滚动**:当选项过多时,select2支持结果的无限滚动,用户无需翻页,只需滚动即可查看所有选项,提高了用户体验。 4. **自定义模板**:select2允许开发者定制显示模板,可以根据项目需求自定义每个选项的...

    select2的几种demo

    4. **无限滚动**:当选项过多时,`select2`可以实现无限滚动效果,避免一次性加载大量数据导致页面卡顿。 5. **自定义数据源**:除了绑定到`&lt;option&gt;`元素,`select2`还能连接到外部数据源,如Ajax请求,动态加载...

    jQuery下拉查询筛选插件Combo Select.zip

    3. **Ajax集成**:如果数据源较大,可以使用Ajax异步加载数据,避免一次性加载过多内容导致页面卡顿。 4. **多选支持**:用户可能需要选择多个选项,插件应提供这种功能,并能够正确处理和显示选中项。 5. **可扩展...

    select2.rar

    - **无限滚动**:在多选模式下,当选项过多时,Select2 提供了无限滚动功能,用户无需翻页,即可浏览所有选项。 - **可禁用和选中状态**:可以方便地设置选项为禁用或选中状态,满足各种业务场景的需求。 - **自定义...

    select2一个很强大的下拉提示

    - **无限滚动:** 当选项过多时,可以实现滚动加载,避免一次性加载所有数据导致页面卡顿。 - **键盘导航:** 用户可以通过键盘上下键快速浏览和选择选项。 3. **使用方法:** - **安装:** 通常通过npm、Yarn ...

    jquery 自定义select控件

    4. 滚动效果:当选项过多时,可以实现滚动条,让用户轻松浏览所有选项。 5. 兼容性处理:考虑不同浏览器的兼容性问题,确保在各种环境下都能正常工作。 总结,jQuery自定义Select控件的核心在于使用JavaScript和CSS...

    jquery select下拉菜单美化搜索框样式代码

    对于大数据量的下拉菜单,应使用异步加载或分页策略,避免一次性加载过多选项导致页面卡顿。同时,确保这些美化后的下拉菜单在各种浏览器和设备上都能正常工作,包括移动设备和平板电脑。 在文件`texiao4748_...

Global site tag (gtag.js) - Google Analytics