高难度的省市联动，高手指教

Question

我们以前看到的都是下拉框实现省市地区联动，我现在要这样实现效果：
不用下拉框用INPUT框代替，比如省：我输入g后，在输入框下面提示
g 广东
g 广西
如果选择g 广东后就显示第二个输入框是市的，也是一个input框，输入c 在下面显示
c 潮州(这里的市是属于前面选择的省的)

Answer 1

这个应该说不难的,主要是你的数据库设计问题吧,你需要有一个字段用来存放你省市的拼音,然后去比对就好了;至于不刷新的话只是ajax的应用

Answer 2

<select>
<option>请选择省（可以按拼音的第一个字母帮助快速选择）
<option>B北京
<option>G广东
<option>G广西
<option>H湖南
<option>H湖北
</select>

Answer 3

JK兄，我上面说了不用select用input
我这有段代码，可以实现分别输入提示省和市的信息，但是如何关联不知道，请高手指点，代码比较长，复制可以直接运行。
<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>

Answer 4

严重怀疑：滥用combox。
吃不了嘟着走，不管你。