现在省市地址三级联动的代码很多,但是客户认为下拉菜单下拉选择省市不太好找,要改成下面需求:
将SELECT框改成可输入下拉框,比如选择省,输入s,可输入下拉框下面就显示上海,四川等S开头的省份,如果选择上海,然后市的可输入下拉框输入c,就显示属于上海省的带C开始的市,比如显示崇明,同理选择崇明后,地区也如上一样.难度太大,请高手们帮忙改改,客人等着用,急死了.
将SELECT框改成可输入下拉框,比如选择省,输入s,可输入下拉框下面就显示上海,四川等S开头的省份,如果选择上海,然后市的可输入下拉框输入c,就显示属于上海省的带C开始的市,比如显示崇明,同理选择崇明后,地区也如上一样.难度太大,请高手们帮忙改改,客人等着用,急死了.
<!--
var arr1=new Array("B","S","T","s","H")
var arr2=new Array("北京","上海","天津","四川","湖南");
function selectByChar()
{
var ipt=document.getElementById("shortChar");
var oSelect=document.getElementById("mySelect");
var tempArr=new Array();
for(i=0;i<arr1.length;i++)
{
if(ipt.value.toUpperCase()==arr1[i].toUpperCase())
{
tempArr.push(arr2[i]);
}
} var len=oSelect.length;
if(len>0)//清除原来的option
{
for(i=len-1;i>=0;i--)
{
oSelect.removeChild(oSelect.options[i]);
}
}
if(tempArr.length>0)
{
var o=null;
for(i=0;i<tempArr.length;i++)//添加新的option
{
o= document.createElement("option");
oSelect.options.add(o,i);
o.innerText=o.Value=tempArr[i];
}
//选择第一个option
oSelect.options[0].selected=true;
}
ipt.blur();
}
//-->
</script>
分别输入"B","s","T","S","H"看看:
<input type="text" id="shortChar" onfocus="this.value=''" onkeyup="selectByChar()"/>
<select name="mySelect" size="5">
</select>
不过那个arr2 可以写个二维的, 对应小写s之类的省份, 把输入的不管大小写都转成小写!