<var>标签是计算机文档中应用的另一个小窍门，这个标签经常与 <code>和 <pre>标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。
用 <var>标签标记的文本通常显示为斜体。
就像其他与计算机编程和文档相关的标签一样，<var>标签不只是让用户更容易理解和浏览你的文档，而且将来某些自动系统还可以利用这些恰当的标签，从你的文档中提取信息以及文档中提到的有用参数。提供给浏览器的语义信息越多，浏览器就可以越好地把这些信息展示给用户。
简单来说就是 显示效果上是斜体，作用上就是方便别人在页面代码上筛选出被<var></var>包围的字符串
如果仅考虑客户端，那么用的就是数据字典，将数据缓存起来。
考虑到数据来自于服务端的比较多，且结合AJAX技术，下拉框中的内容每发生一次改变，就会查询一次服务器，然后服务端对客户端的请求进行处理，找到响应的数据，并反馈给客户端，然后客户端进行显示，这种下拉框式的列表，如今一般都是自己写的样式了。
为避免页面重复刷新，推荐使用AJAX进行异步交互。
<html><head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>123</title>
<style type="text/css">
#list
{
height: 100px
width: 155px
border:1px solid #FFCC00
}
</style>
</head>
<body>
<input id="search"/>
<div id="list" style="display: none">
<ul id="group">
</ul>
</div>
</body>
<script LANGUAGE="JAVASCRIPT">
var array = [["a", "ab", "abc"], ["d", "de", "def"]]
var search = document.getElementById("search")
var list = document.getElementById("list")
var group = document.getElementById("group")
search.addEventListener("input", input, false)
//search.addEventListener("keyup", keyup, false)
function input(){
//删除所有子节点
var children = group.childNodes
while(group.lastChild)
{
group.removeChild(group.lastChild)
list.style.display = "none"
}
for(var i = 0i <array.lengthi++)
{
for(var j = 0j <array[i].lengthj++)
{
if(search.value.toString() == array[i][j])
{
list.style.display = "block"
show(array[i])
}
}
}
}
//显示内容
function show(arr){
var temp = arr
for(var k = 0k <temp.lengthk++)
{
if(temp[k].indexOf(search.value) >-1)
{
var ele = document.createElement("li")
group.appendChild(ele)
ele.innerHTML = temp[k]
}
}
}
</script>
</html>
如果要兼容IE，input事件名称要做修改。
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
select {width: 75pxfont-size: 20pxcolor:#000000font-family: '宋体'}
#main {width: 400pxheight: 20pxmargin:0 autoword-spacing: 0px}
#main select { color:green}
#main select[name=S1] { color:orange}
</style>
</head>
<body>
<div id="main"></div>
<script>
initSelects()
function initSelects() {
var data = {
10:[
[12,110,190,'ESA1210'],
[16,150,230,'ESA1610'],
[20,190,270,'ESA2010']
],
20: [
[24,230,310,'ESA2410'],
[28,270,350,'ESA2810'],
[32,310,390,'ESA3210'],
[36,350,430,'ESA3610']
],
40: [
[40,390,470,'ESA4010'],
[44,430,510,'ESA4410'],
[48,470,550,'ESA4810'],
[52,510,590,'ESA5210']
]
}
var selectNames = ['S1', 'S2', 'S3', 'S4', 'S5']
var sunits = ['mm', 'n', 'mm', 'mm', '']
var main = document.getElementById('main')
var S1 = document.createElement('select')
S1.name = selectNames[0]
S1.onchange = function() {
for(var i = 0i <SG2s.lengthi++)
SG2s[i].options.length = 0
data[this.value].forEach(function(line) {
for(var i = 0i <SG2s.lengthi++) {
var atom = line[i]
SG2s[i].options.add( new Option(atom + sunits[i], atom) )
}
})
}
for(var y in data)
S1.options.add(new Option(y + select[0], y))
main.append(S1)
var SG2s = []
var names
for(var i = 0i <4i++) {
var s = document.createElement('select')
s.name = selectNames[i + 1]
s.onchange = function() {
for(var i = 0i <SG2s.lengthi++)
SG2s[i].selectedIndex = this.selectedIndex
}
SG2s.push(s)
main.append(s)
}
S1.onchange()
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）