当前位置: 代码迷 >> Web前端 >> 当select中内容过剩时,使用搜索
  详细解决方案

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

热度:68   发布时间:2012-11-07 09:56:10.0
当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))
		}
	}
}



  相关解决方案