动态列表项目之二
上一节介绍的动态列表项目,其实是不够动态的,因为列表内容是固化在js代码文件中的,如果列表项目要根据后台数据库内容动态生成,显然这种方式是行不通的。
假定后台有个名为"汽车"的数据表:
前台的录入界面如下图,希望选择不同的国家后,能自动根据后台数据表的内容,列出该国的汽车品牌供选择:
设计步骤
1、在"d:\web"目录下,建立一个子目录lib,在这个目录建立一个文本文件,文件名为"brands.js",文件内容为:
function getBrands(){
var gj=document.getElementById("国家").value;
setOptions("品牌",document.getElementById(gj).innerHTML);
}
2、HttpRequest事件代码:
Select
Case e.Path
Case "test.htm"
Dim wb
As New
weui
wb.AddForm("","form1","test.htm")
Dim gjs
As List(of
String) = DataTables("汽车").GetValues("国家")
With wb.AddInputGroup("form1","ipg1","动态列表")
.AddSelect("国家","国家","|"
& String.Join("|",gjs.ToArray)).Attribute
= "onchange='getBrands()'"
'调用js函数。
.AddSelect("品牌","品牌","")
End With
With wb.AddButtonGroup("form1","btg1",True)
.Add("btn1",
"确定",
"submit")
End With
For Each
gj As
String In
gjs
'插入一些隐藏段落,用于存储各个国家的汽车品牌
wb.InsertHTML("<p
hidden id='" &
gj & "'>"
& DataTables("汽车").GetComboListString("品牌","国家='"
& gj
& "'")
& "</p>")
Next
wb.AppendHTML("<script
src='./lib/brands.js'></script>") '引入脚本文件
e.WriteString(wb.Build) '生成网页
End Select
设计的思路很简单,就是生成的网页中,插入一些隐藏的段落,段落id为国家名称,内容为该国家的汽车品牌:
<p hidden id='德国'>奥迪|宝马|奔驰|大众|欧宝</p>
<p hidden id='日本'>本田|丰田|雷克萨斯|讴歌|日产</p>
<p hidden id='中国'>比亚迪|长城|吉利|奇瑞|荣威</p>
当用户选择不同国家后,触发onchange事件,执行getBrand函数,自动找出对应的段落,从中提取出列表项目。