网页中下拉式列表框的数据过滤

原创 2004年07月03日 21:42:00

  网页下拉式列表框的数据过滤的情况我想大多数网络程序设计者都会遇到,这种情况具体是指一个页面中有两个或多个下拉列表框,第二个列表框的值随着第一个列表框的值改变(即过滤出不需要的数据),比如,在用户注册信息时,当用户选择了省份过后,该省辖的城市名称就出现在第二个下拉列表框中。

  这种情况的解决方法有两种,一种是使用所用的网络程序设计语言(如ASP,JSP,PHP等)来实现,但这种方法的缺点是当用户很多网络数据很慢时,速度很慢,第二个下拉列表框的值需要一段时间才会出来,降低了效率,而且页面不好控制,这里不阐述这种方法。

  第二种解决方法是采用javascript来控制,其基本思想是:首先将所有城市的名称和编码还有所属省份的编码存放在一个二位数组中,该数组有三列多行,行数根据城市个数决定,每一行的第一列表示城市编号,第二列表示城市名称,第三列表示所属省份的编号。该数据结构就像数据库中的表,只是这里的没有字段名。其代码如下:
<script @language=javascript>
city = new Array(5);
city[0] = new Array(3);
city[0][0]='成都';city[0][1]='49';city[0][2]='1';
city[1] = new Array(3);
city[1][0]='绵阳(2)';city[1][1]='50';city[1][2]='1';
city[2] = new Array(3);
city[2][0]='广州';city[2][1]='51';city[2][2]='2';
city[3] = new Array(3);
city[3][0]='深圳';city[3][1]='52';city[3][2]='2';
city[4] = new Array(3);
city[4][0]='上海';city[4][1]='53';city[4][2]='3';
</script>
  然后再第一个下拉列表框中选项变化是执行的javascript函数如下(干函数的功能就是数据过滤):
<script @language=javascript>
function selectcity(){
 document.form1.city.options[0]=new Option("请选择城市","-1");
 for(var ctr=1;ctr < document.form1.city.length; ctr++)
        document.form1.city.options[ctr]=new Option("",""); 
 var l=1;
 for(var k = 0;k < 5;k++){
  if(form1.province.value==city[k][2]){
      document.form1.city.options[l]=new Option(city[k][1],city[k][0]);
   l++;
   }
 }
}
</script>
  在下拉列表框的表单中的代码如下:
<form action="" method="post" name="form1">
<select name="province" id="province" onChange="selectcity();">
   <option value="-1">请选择省份</option>  
  <option value="1" >四川</option>  
  <option value="2" >广东</option>  
  <option value="3" >上海</option>
  </select>  <br>
<select name="city" id="city" >          </select>
</form>

  该代码已在现阶段各种常用的浏览器上测试通过,在某些嵌入式的浏览器上不支持,比如在NC上嵌入的浏览器上不支持这种方式,如果你使用的是IE或者Netscape,那么,请放心使用。

带输入过滤的select

带输入过滤的select div,span,p,td,font{font-size:10pt;} var arr = ["闲人书库","闲人BLOG","闲人设计...
  • chyl134528
  • chyl134528
  • 2014年09月01日 14:08
  • 2686

可输入过滤和直接选择的select控件

代码: "> "> .selectTab{ width: 726px; height: 43px; background-image: url(""); background-re...
  • gqltt
  • gqltt
  • 2014年11月11日 11:30
  • 2119

原生js实现对select下拉列表的内容过滤

原生js实现对select下拉列表的内容过滤 场景描述: 笔者在工作的过程中,经常碰到这样的业务场景。客户要求一个下拉列表框旁边要有一个输入过滤的功能:如下图所示 由于在一...
  • zxy0216
  • zxy0216
  • 2017年06月09日 13:05
  • 1002

带输入框的下拉列表 select 输入框 过滤

  • 2011年07月12日 11:29
  • 2KB
  • 下载

jquery EasyUI 的下拉框内容自动过滤

环境:jquery EasyUI 1.4.1 关于内容自动过滤的下拉框涉及2种 combobox(又combo扩展而来)、 combogrid(又combo和datagrid扩展而来) 内容过滤的属性...
  • rainyspring4540
  • rainyspring4540
  • 2016年11月23日 14:28
  • 1613

文本框输入值时过滤显示下拉选项

  • 2016年08月10日 17:56
  • 1.31MB
  • 下载

可输入的html下拉列表框,自带筛选

  • 2017年01月26日 10:11
  • 33KB
  • 下载

文本框+层模拟下拉框,并实现输入自动提示和过滤

采用xml,xsl,js,xmldom编写.兼容ie和firefox浏览器.效果如以下网址:http://www.vcsale.com/cheap.Final_Fantasy_XI.3.aspx 1....
  • fcuandy
  • fcuandy
  • 2007年11月22日 20:49
  • 3565

下拉框与列表框

下拉列表框和下拉列表 下拉列表框和下拉列表 下拉列表框:请选择电话区号: 北京 西安 成都 ...
  • u013263923
  • u013263923
  • 2014年10月24日 17:30
  • 1394

vb.net制作简单的下拉菜单:

(1)首先写两个js函数,获得页面中需要获得点的x,y坐标(如果是已经确定该点的位置,则可以不写): function pageX(elem) {             return elem....
  • XiaoKanZheShiJie
  • XiaoKanZheShiJie
  • 2014年07月16日 21:53
  • 490
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页中下拉式列表框的数据过滤
举报原因:
原因补充:

(最多只允许输入30个字)