我们以前看到的都是下拉框实现省市地区联动,我现在要这样实现效果:
不用下拉框用INPUT框代替,比如省:我输入g后,在输入框下面提示
g 广东
g 广西
如果选择g 广东后就显示第二个输入框是市的,也是一个input框,输入c 在下面显示
c 潮州(这里的市是属于前面选择的省的)
不用下拉框用INPUT框代替,比如省:我输入g后,在输入框下面提示
g 广东
g 广西
如果选择g 广东后就显示第二个输入框是市的,也是一个input框,输入c 在下面显示
c 潮州(这里的市是属于前面选择的省的)
<option>请选择省(可以按拼音的第一个字母帮助快速选择)
<option>B北京
<option>G广东
<option>G广西
<option>H湖南
<option>H湖北
</select>
我这有段代码,可以实现分别输入提示省和市的信息,但是如何关联不知道,请高手指点,代码比较长,复制可以直接运行。
<script language="javascript">
var intIndex=0;arrList = new Array(); function dearray(aa)//定义array
{
arrList = aa.split(',');
intIndex = arrList.length; } function test() {
init();
dearray("s 上海,b 北京,s 四川,j 江西");
smanPromptList(arrList,"aspx");
dearray("s 上海,c 崇明,b 北京,c 成都");
smanPromptList(arrList,"aspx2");
}
function init() { if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
arrList.sort( function(a, b) {
if(a.length>b.length)return 1;
else if(a.length==b.length)return a.localeCompare(b);
else return -1;
}
);
}
function smanPromptList(arrList,objInputId){
var objouter=document.getElementById("__smanDisp") //显示的DIV对象
var objInput = document.getElementById(objInputId); //文本框对象
var selectedIndex=-1;
var intTmp; //循环用的:) if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}
//文本框失去焦点
objInput.onblur=function(){
objouter.style.display='none';
}
//文本框按键抬起
objInput.onkeyup=checkKeyCode;
//文本框得到焦点
objInput.onfocus=checkAndShow;
function checkKeyCode(){
var ie = (document.all)? true:false
if (ie){
var keyCode=event.keyCode
if (keyCode==40||keyCode==38){ //下上
var isUp=false
if(keyCode==40) isUp=true ;
chageSelection(isUp)
}else if (keyCode==13){//回车
outSelection(selectedIndex);
}else{
checkAndShow()
}
}else{
checkAndShow()
}
divPosition()
} function checkAndShow(){
var strInput = objInput.value
if (strInput!=""){
divPosition();
selectedIndex=-1;
objouter.innerHTML ="";
for (intTmp=0;intTmp<arrList.length;intTmp++){
if (arrList[intTmp].substr(0, strInput.length)==strInput){
addOption(arrList[intTmp]);
}
}
objouter.style.display='';
}else{
objouter.style.display='none';
}
function addOption(value){
objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + value + "</div>"
}
}
function chageSelection(isUp){
if (objouter.style.display=='none'){
objouter.style.display='';
}else{
if (isUp)
selectedIndex++
else
selectedIndex--
}
var maxIndex = objouter.children.length-1;
if (selectedIndex<0){selectedIndex=0}
if (selectedIndex>maxIndex) {selectedIndex=maxIndex}
for (intTmp=0;intTmp<=maxIndex;intTmp++){ if (intTmp==selectedIndex){
objouter.children[intTmp].className="sman_selectedStyle";
}else{
objouter.children[intTmp].className="";
}
}
}
function outSelection(Index){
objInput.value = objouter.children[Index].innerText;
objouter.style.display='none';
}
function divPosition(){
var clx,cly;
clx=event.clientX;
cly = event.clientY;
objouter.style.top = cly+10;
objouter.style.left = clx+20;
objouter.style.width= getAbsoluteWidth(objInput)
}
}
document.write("<div id='__smanDisp' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' onbulr> </div>");
document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");
function getAbsoluteHeight(ob){
return ob.offsetHeight
}
function getAbsoluteWidth(ob){
return ob.offsetWidth
}
function getAbsoluteLeft(ob){
var mendingLeft = ob .offsetLeft;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
mendingLeft += ob .offsetParent.offsetLeft;
mendingOb = ob.offsetParent;
}
return mendingLeft ;
}
function getAbsoluteTop(ob){
var mendingTop = ob.offsetTop;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
mendingTop += ob .offsetParent.offsetTop;
ob = ob .offsetParent;
}
return mendingTop ;
}
</script>
<body onLoad="test()">
<body onload="test()"></body>
请输入内容:<br><input type="text" id="aspx">
<br></font>
<input type="text" id="aspx2"><br> </font>
吃不了嘟着走,不管你。