各位高手各路英雄,帮我看看这两段代码如何整和,万分感谢!!
是这样的,下面这段代码功能是鼠标在SELECT框焦点上的时候可以快速检索SELECT下的内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> new document </title>
<meta name= "generator " content= "editplus " />
<meta name= "author " content= " " />
<meta name= "keywords " content= " " />
<meta name= "description " content= " " />
</head>
<body>
<h3> 仅以省为示例，纯 JS 实现，市、县思路完全一致。只需对三级联动略作修改即可使用 </h3>
<h3> 需要注意的是：回发数据中必须有 initial 一列，用于筛选。注：必须保证英文输入法状态 </h3>
<select id= "selProvince ">
<option value= "-1 "> --请选择 省-- </option>
<option value= "1 " intial= "b "> 北京市 </option>
<option value= "2 " intial= "s "> 上海市 </option>
<option value= "3 " intial= "t "> 天津市 </option>
<option value= "4 " intial= "c "> 重庆市 </option>
<option value= "5 " intial= "h "> 河北省 </option>
<option value= "6 " intial= "h "> 河南省 </option>
<option value= "7 " intial= "s "> 山东省 </option>
<option value= "8 " intial= "s "> 山西省 </option>
<option value= "8 " intial= "h "> 黑龙江省 </option>
</select>
<script type= "text/javascript ">
<!--
var oProvince = document.getElementById( "selProvince ");
var arrProvinces = new Array();
var optProvice;
// 保存省信息至对象数组
for (var i=0; i <oProvince.options.length; i++)
{
optProvice = oProvince.options;
arrProvinces = {valueptProvice.value, intialptProvice.intial, textptProvice.text};
}
oProvince.onmouseover = function ()
{
this.focus();
};
oProvince.onkeypress = function ()
{
var strInitial = String.fromCharCode(event.keyCode).toLowerCase();
this.options.length = 0;
for (var i=0; i <arrProvinces.length; i++)
{
if (arrProvinces.intial === strInitial)
{
this.options.add(new Option(arrProvinces.text, arrProvinces.value));
}
}
};
//-->
</script>
</body>
</html>
我想把这个应用用到省市地区的联动菜单里,不知道如何将上面例子怎么结合到下面代码中,不晓得 <option value= "4 " intial= "c "> 这样的加在什么地方,请高手指教,很急!!
联动框代码:
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<head>
<title> new document </title>
<meta name= "generator " content= "editplus " />
<meta name= "author " content= " " />
<meta name= "keywords " content= " " />
<meta name= "description " content= " " />
</head>
<SCRIPT LANGUAGE= "JavaScript ">
<!--
function Dsy()
{
this.Items = {};
}
Dsy.prototype.add = function(id,iArray)
{
this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id)
{
if(typeof(this.Items[id]) == "undefined ") return false;
return true;
}
function change(v){
var str= "0 ";
for(i=0;i <v;i++){ str+=( "_ "+(document.getElementById(s).selectedIndex-1));};
var ss=document.getElementById(s[v]);
with(ss){
length = 0;
options[0]=new Option(opt0[v],opt0[v]);
if(v && document.getElementById(s[v-1]).selectedIndex> 0 || !v)
{
if(dsy.Exists(str)){
ar = dsy.Items[str];
for(i=0;i <ar.length;i++)options[length]=new Option(ar,ar);
if(v)options[1].selected = true;
}
}
if(++v <s.length){change(v);}
}
}
var dsy = new Dsy();
dsy.add( "0 ",[ "北京 ", "安徽 ", "福建 "]);
dsy.add( "0_0 ",[ "北京 "]);
dsy.add( "0_0_0 ",[ "北京市 ", "东城 ", "西城 ", "崇文 ", "宣武 ", "朝阳 ", "丰台 ", "石景山 ", "海淀 ", "门头沟 ", "房山 ", "通州 ", "顺义 ", "昌平 ", "大兴 ", "平谷 ", "怀柔 ", "密云 ", "延庆 "]);
dsy.add( "0_1 ",[ "安庆 ", "蚌埠 ", "巢湖 ", "池州 ", "滁州 ", "阜阳 ", "合肥 ", "淮北 ", "淮南 ", "黄山 ", "六安 ", "马鞍山 ", "宿州 ", "铜陵 ", "芜湖 ", "宣城 ", "亳州 "]);
dsy.add( "0_1_0 ",[ "安庆市 ", "怀宁县 ", "潜山县 ", "宿松县 ", "太湖县 ", "桐城市 ", "望江县 ", "岳西县 ", "枞阳县 "]);
dsy.add( "0_1_16 ",[ "利辛县 ", "蒙城县 ", "涡阳县 ", "亳州市 "]);
dsy.add( "0_2 ",[ "福州 ", "龙岩 ", "南平 ", "宁德 ", "莆田 ", "泉州 ", "三明 ", "厦门 ", "漳州 "]);
dsy.add( "0_2_0 ",[ "长乐市 ", "福清市 ", "福州市 ", "连江县 ", "罗源县 ", "闽侯县 ", "闽清县 ", "平潭县 ", "永泰县 "]);
dsy.add( "0_2_5 ",[ "安溪县 ", "德化县 ", "惠安县 ", "金门县 ", "晋江市 ", "南安市 ", "泉州市 ", "石狮市 ", "永春县 "]);
dsy.add( "0_29_8 ",[ "苍南县 ", "洞头县 ", "乐清市 ", "平阳县 ", "瑞安市 ", "泰顺县 ", "温州市 ", "文成县 ", "永嘉县 "]);
dsy.add( "0_29_9 ",[ "舟山市 ", "岱山县 ", "嵊泗县 "]);
dsy.add( "0_30 ",[ "重庆 "]);
dsy.add( "0_30_0 ",[ "城口县 ", "大足县 "]);
//-->
</SCRIPT>
<SCRIPT LANGUAGE = JavaScript>
var s=[ "s1 ", "s2 ", "s3 "];
var opt0 = [ "省份 ", "地级市 ", "市、县级市、县 "];
function setup()
{
for(i=0;i <s.length-1;i++)
document.getElementById(s).onchange=new Function( "change( "+(i+1)+ ") ");
change(0);
}
//-->
</SCRIPT>
</head>
<body bgcolor= "#E0E0E0 " onLoad= "setup() ">
多级关联菜单：
<form name= "frm ">
<p>
起点城市
<select id= "s1 ">
<option> 省份 </option>
</select>
<select id= "s2 ">
<option> 地级市 </option>
</select>
<select id= "s3 ">
<option> 市、县级市、县 </option>
</select>
</p>
</form>
</body>
</html>
[解决办法]
To LZ
俺测试时 b.北京 a.安徽 f.福建 都没问题！
以下代码略做修改实现“选择a 的时候安徽就自动跳到选择项目,而无需要先按下拉框再选择安徽”，同时市县会联动。
注：这段代码已经改得很乱了，以后很难维护！！
L@_@K
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<head>
<title> new document </title>
<meta name= "generator " content= "editplus " />
<meta name= "author " content= " " />
<meta name= "keywords " content= " " />
<meta name= "description " content= " " />
</head>
<SCRIPT LANGUAGE= "JavaScript ">
<!--
function Dsy()
{
this.Items = {};
this.Provinces = new Array();
this.Cities = new Array();
this.Counties = new Array();
}
Dsy.prototype.add = function(id,iArray)
{
this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id)
{
if(typeof(this.Items[id]) == "undefined ") return false;
return true;
}
function change(v)
{
var str = "0 ";
for(i=0;i <v;i++)
{
var oSelect = document.getElementById(s[i]);
str += "_ "+(oSelect.options[oSelect.selectedIndex].value);
}
var ss=document.getElementById(s[v]);
with(ss)
{
length = 0;
options[0]=new Option(opt0[v],opt0[v]);
if(v && document.getElementById(s[v-1]).selectedIndex> 0 || !v)
{
if(dsy.Exists(str))
{
ar = dsy.Items[str];
var strLevelName;
switch (str.split( "_ ").length)
{
case 1:
strLevelName = "Provinces ";
break;
case 2:
strLevelName = "Cities ";
break;
case 3:
strLevelName = "Counties ";
break;
}
for(i=0; i <ar.length; i++)
{
dsy[strLevelName][i] = ar[i].split( ". ");
options[length]=new Option(dsy[strLevelName][i][1],i);
}
if(v)options[1].selected = true;
}
}
if(++v <s.length){change(v);}
}
}
var dsy = new Dsy();
dsy.add( "0 ",[ "b.北京 ", "a.安徽 ", "f.福建 "]);
dsy.add( "0_0 ",[ "b.北京 "]);
dsy.add( "0_0_0 ",[ "b.北京市 ", "d.东城 ", "x.西城 ", "c.崇文 ", "x.宣武 ", "c.朝阳 ", "f.丰台 ", "s.石景山 ", "h.海淀 ", "m.门头沟 ", "f.房山 ", "t.通州 ", "s.顺义 ", "c.昌平 ", "d.大兴 ", "p.平谷 ", "h.怀柔 ", "m.密云 ", "y.延庆 "]);
dsy.add( "0_1 ",[ "a.安庆 ", "b.蚌埠 ", "c.巢湖 ", "c.池州 ", "x.滁州 ", "f.阜阳 ", "h.合肥 ", "h.淮北 ", "h.淮南 ", "h.黄山 ", "l.六安 ", "m.马鞍山 ", "s.宿州 ", "t.铜陵 ", "w.芜湖 ", "x.宣城 ", "h.亳州 "]);
dsy.add( "0_1_0 ",[ "a.安庆市 ", "h.怀宁县 ", "q.潜山县 ", "s.宿松县 ", "t.太湖县 ", "t.桐城市 ", "w.望江县 ", "y.岳西县 ", "z.枞阳县 "]);
dsy.add( "0_1_16 ",[ "x.利辛县 ", "m.蒙城县 ", "w.涡阳县 ", "h.亳州市 "]);
dsy.add( "0_2 ",[ "f.福州 ", "l.龙岩 ", "n.南平 ", "n.宁德 ", "p.莆田 ", "q.泉州 ", "s.三明 ", "x.厦门 ", "z.漳州 "]);
dsy.add( "0_2_0 ",[ "c.长乐市 ", "f.福清市 ", "f.福州市 ", "l.连江县 ", "l.罗源县 ", "m.闽侯县 ", "m.闽清县 ", "p.平潭县 ", "y.永泰县 "]);
dsy.add( "0_2_5 ",[ "a.安溪县 ", "d.德化县 ", "h.惠安县 ", "j.金门县 ", "j.晋江市 ", "n.南安市 ", "q.泉州市 ", "s.石狮市 ", "y.永春县 "]);
dsy.add( "0_29_8 ",[ "苍南县 ", "洞头县 ", "乐清市 ", "平阳县 ", "瑞安市 ", "泰顺县 ", "温州市 ", "文成县 ", "永嘉县 "]);
dsy.add( "0_29_9 ",[ "舟山市 ", "岱山县 ", "嵊泗县 "]);
dsy.add( "0_30 ",[ "重庆 "]);
dsy.add( "0_30_0 ",[ "城口县 ", "大足县 "]);
//-->
</SCRIPT>
<SCRIPT LANGUAGE = JavaScript>
var s = [ "s1 ", "s2 ", "s3 "];
var opt0 = [ "省份 ", "地级市 ", "市、县级市、县 "];
function setup()
{
for(i=0;i <s.length;i++)
{
if (i <s.length-1)
{
document.getElementById(s[i]).onchange = new Function( "change( "+(i+1)+ ") ");
}
document.getElementById(s[i]).onmouseover = function ()
{
this.focus();
};
document.getElementById(s[i]).onkeypress = function ()
{
this.selectedIndex = 0;
var strInitial = String.fromCharCode(event.keyCode).toLowerCase();
this.options.length = 1;
var numIndex = parseInt(this.id.substr(1,1));
var strLevelName;
switch (numIndex)
{
case 1:
strLevelName = "Provinces ";
break;
case 2:
strLevelName = "Cities ";
break;
case 3:
strLevelName = "Counties ";
break;
}
var arrCurrent = dsy[strLevelName];
for (var i=0; i <arrCurrent.length; i++)
{
if (arrCurrent[i][0] === strInitial)
{
this.options.add(new Option(arrCurrent[i][1],i));
}
}
if (numIndex <3 && this.options.length> 1)
{
this.selectedIndex = 1;
change(numIndex);
}
};
}
change(0);
}
//-->
</SCRIPT>
</head>
<body bgcolor= "#E0E0E0 " onLoad= "setup() ">
多级关联菜单：
<form name= "frm ">
<p>
起点城市
<select id= "s1 ">
<option> 省份 </option>
</select>
<select id= "s2 ">
<option> 地级市 </option>
</select>
<select id= "s3 ">
<option> 市、县级市、县 </option>
</select>
</p>
</form>
</body>
</html>
