将SELECT框改成可输入下拉框,比如选择省,输入s,可输入下拉框下面就显示上海,四川等S开头的省份,如果选择上海,然后市的可输入下拉框输入c,就显示属于上海省的带C开始的市,比如显示崇明,同理选择崇明后,地区也如上一样.
难度太大,请高手们帮忙改改,客人等着用,急死了.
16 个解决方案
#1
大家帮帮忙吧,急啊
#2
是挺不好弄,还要判断拼音拼写。
#3
觉得你可以在输入的时候弄个层显示匹配的项,然后用户用鼠标点,或者输入1、2、3……选中该选项。可以写成一个htc文件
#4
我找了段代码是匹配输入查询的,但是联动不会弄,能帮我改改不
我这有段代码,可以实现分别输入提示省和市的信息,但是如何关联不知道,请高手指点,代码比较长,复制可以直接运行。
<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>
我这有段代码,可以实现分别输入提示省和市的信息,但是如何关联不知道,请高手指点,代码比较长,复制可以直接运行。
<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>
#5
你想要改成什么样的?
#6
现在不是很多JS实现的SELECT省市地区联动的吗,现在就是想把SELECT框改成可输入查询的联动
#7
就象我帖子上说的那种情况
#8
真的没有人可以帮我吗
#9
呵呵,周末高手都去 happy 了,俺帮你看看吧!
先说说基本思路,首先明确不改可输入下拉框,仅对 Select 增加键盘监听事件!
理由,因为客户不是程序员,他们的想法只能作为参考,不能照单全收!
程序员需要根据实际情况加以判断,省市县都是国家行政区划规定好的,没必要输入,
客户仅仅需要的是快速筛选功能,根本不会自己输入,客户都很懒,因此他们要为懒惰付出代价!
先说说基本思路,首先明确不改可输入下拉框,仅对 Select 增加键盘监听事件!
理由,因为客户不是程序员,他们的想法只能作为参考,不能照单全收!
程序员需要根据实际情况加以判断,省市县都是国家行政区划规定好的,没必要输入,
客户仅仅需要的是快速筛选功能,根本不会自己输入,客户都很懒,因此他们要为懒惰付出代价!
#10
简单实现,LZ 自己改改吧!
L@_@K
<!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>
<h3>另,Select 本身就具有筛选功能!请保证在焦点存在的情况下,在下面的 Select 上输入 “黑”</h3>
<select onmouseover="this.focus();">
<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[i];
arrProvinces[i] = {value:optProvice.value, intial:optProvice.intial, text:optProvice.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[i].intial === strInitial)
{
this.options.add(new Option(arrProvinces[i].text, arrProvinces[i].value));
}
}
};
//-->
</script>
</body>
</html>
L@_@K
<!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>
<h3>另,Select 本身就具有筛选功能!请保证在焦点存在的情况下,在下面的 Select 上输入 “黑”</h3>
<select onmouseover="this.focus();">
<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[i];
arrProvinces[i] = {value:optProvice.value, intial:optProvice.intial, text:optProvice.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[i].intial === strInitial)
{
this.options.add(new Option(arrProvinces[i].text, arrProvinces[i].value));
}
}
};
//-->
</script>
</body>
</html>
#11
关注
#12
yixianggao兄弟谢谢你,你的方法是很不错,但是我找到的三级联动的代码如下,不知道你那个intial加在什么地方:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script language="javascript" src="city.js"></script>
<SCRIPT LANGUAGE = JavaScript>
var s=["s1","s2","s3"];
var opt0=["省份","地级市","市、县级市、县"];
function setup(){
for(i=0;i<s.length-1;i++){
document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");}
change(0);}
</SCRIPT>
</head>
<body onload="setup();">
<form name="frm">
<select id="s1"><option>省份</option></select>
<select id="s2"><option>地级市</option></select>
<select id="s3"><option>市、县级市、县</option></select>
</form>
</body>
</html>
JS文件下载地址
http://ys-e.ys168.com/ys168up/D3/?city.jsy69z79fdql9f9b3z95bci1fd0fq9b4b0fd2b2b4f6e06e15e24b1b0f2f9bp9b4fc1f9b6z
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script language="javascript" src="city.js"></script>
<SCRIPT LANGUAGE = JavaScript>
var s=["s1","s2","s3"];
var opt0=["省份","地级市","市、县级市、县"];
function setup(){
for(i=0;i<s.length-1;i++){
document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");}
change(0);}
</SCRIPT>
</head>
<body onload="setup();">
<form name="frm">
<select id="s1"><option>省份</option></select>
<select id="s2"><option>地级市</option></select>
<select id="s3"><option>市、县级市、县</option></select>
</form>
</body>
</html>
JS文件下载地址
http://ys-e.ys168.com/ys168up/D3/?city.jsy69z79fdql9f9b3z95bci1fd0fq9b4b0fd2b2b4f6e06e15e24b1b0f2f9bp9b4fc1f9b6z
#13
<option value="1" intial="b">这种东西加在哪,怎么改啊
#14
有高手在么,帮帮忙,就等着了
#15
LZ 的 Server 端用什么?ASP.NET?
如果是 ASP.NET 只需在返回的 DataTable 或 DataView 中增加一列 intial,当然这列应该是从数据库查出来的!
intial 不必添加到 option 上,保存在对象数组中即可,仅用于筛选。
俺那么做仅仅为了省事,少写几句初始化代码,哈
如果是 ASP.NET 只需在返回的 DataTable 或 DataView 中增加一列 intial,当然这列应该是从数据库查出来的!
intial 不必添加到 option 上,保存在对象数组中即可,仅用于筛选。
俺那么做仅仅为了省事,少写几句初始化代码,哈
#16
连动的可以按这个写
http://www.pigcode.com/dispbbs.asp?boardid=7&id=210
http://www.pigcode.com/dispbbs.asp?boardid=7&id=210
#1
大家帮帮忙吧,急啊
#2
是挺不好弄,还要判断拼音拼写。
#3
觉得你可以在输入的时候弄个层显示匹配的项,然后用户用鼠标点,或者输入1、2、3……选中该选项。可以写成一个htc文件
#4
我找了段代码是匹配输入查询的,但是联动不会弄,能帮我改改不
我这有段代码,可以实现分别输入提示省和市的信息,但是如何关联不知道,请高手指点,代码比较长,复制可以直接运行。
<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>
我这有段代码,可以实现分别输入提示省和市的信息,但是如何关联不知道,请高手指点,代码比较长,复制可以直接运行。
<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>
#5
你想要改成什么样的?
#6
现在不是很多JS实现的SELECT省市地区联动的吗,现在就是想把SELECT框改成可输入查询的联动
#7
就象我帖子上说的那种情况
#8
真的没有人可以帮我吗
#9
呵呵,周末高手都去 happy 了,俺帮你看看吧!
先说说基本思路,首先明确不改可输入下拉框,仅对 Select 增加键盘监听事件!
理由,因为客户不是程序员,他们的想法只能作为参考,不能照单全收!
程序员需要根据实际情况加以判断,省市县都是国家行政区划规定好的,没必要输入,
客户仅仅需要的是快速筛选功能,根本不会自己输入,客户都很懒,因此他们要为懒惰付出代价!
先说说基本思路,首先明确不改可输入下拉框,仅对 Select 增加键盘监听事件!
理由,因为客户不是程序员,他们的想法只能作为参考,不能照单全收!
程序员需要根据实际情况加以判断,省市县都是国家行政区划规定好的,没必要输入,
客户仅仅需要的是快速筛选功能,根本不会自己输入,客户都很懒,因此他们要为懒惰付出代价!
#10
简单实现,LZ 自己改改吧!
L@_@K
<!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>
<h3>另,Select 本身就具有筛选功能!请保证在焦点存在的情况下,在下面的 Select 上输入 “黑”</h3>
<select onmouseover="this.focus();">
<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[i];
arrProvinces[i] = {value:optProvice.value, intial:optProvice.intial, text:optProvice.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[i].intial === strInitial)
{
this.options.add(new Option(arrProvinces[i].text, arrProvinces[i].value));
}
}
};
//-->
</script>
</body>
</html>
L@_@K
<!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>
<h3>另,Select 本身就具有筛选功能!请保证在焦点存在的情况下,在下面的 Select 上输入 “黑”</h3>
<select onmouseover="this.focus();">
<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[i];
arrProvinces[i] = {value:optProvice.value, intial:optProvice.intial, text:optProvice.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[i].intial === strInitial)
{
this.options.add(new Option(arrProvinces[i].text, arrProvinces[i].value));
}
}
};
//-->
</script>
</body>
</html>
#11
关注
#12
yixianggao兄弟谢谢你,你的方法是很不错,但是我找到的三级联动的代码如下,不知道你那个intial加在什么地方:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script language="javascript" src="city.js"></script>
<SCRIPT LANGUAGE = JavaScript>
var s=["s1","s2","s3"];
var opt0=["省份","地级市","市、县级市、县"];
function setup(){
for(i=0;i<s.length-1;i++){
document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");}
change(0);}
</SCRIPT>
</head>
<body onload="setup();">
<form name="frm">
<select id="s1"><option>省份</option></select>
<select id="s2"><option>地级市</option></select>
<select id="s3"><option>市、县级市、县</option></select>
</form>
</body>
</html>
JS文件下载地址
http://ys-e.ys168.com/ys168up/D3/?city.jsy69z79fdql9f9b3z95bci1fd0fq9b4b0fd2b2b4f6e06e15e24b1b0f2f9bp9b4fc1f9b6z
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script language="javascript" src="city.js"></script>
<SCRIPT LANGUAGE = JavaScript>
var s=["s1","s2","s3"];
var opt0=["省份","地级市","市、县级市、县"];
function setup(){
for(i=0;i<s.length-1;i++){
document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");}
change(0);}
</SCRIPT>
</head>
<body onload="setup();">
<form name="frm">
<select id="s1"><option>省份</option></select>
<select id="s2"><option>地级市</option></select>
<select id="s3"><option>市、县级市、县</option></select>
</form>
</body>
</html>
JS文件下载地址
http://ys-e.ys168.com/ys168up/D3/?city.jsy69z79fdql9f9b3z95bci1fd0fq9b4b0fd2b2b4f6e06e15e24b1b0f2f9bp9b4fc1f9b6z
#13
<option value="1" intial="b">这种东西加在哪,怎么改啊
#14
有高手在么,帮帮忙,就等着了
#15
LZ 的 Server 端用什么?ASP.NET?
如果是 ASP.NET 只需在返回的 DataTable 或 DataView 中增加一列 intial,当然这列应该是从数据库查出来的!
intial 不必添加到 option 上,保存在对象数组中即可,仅用于筛选。
俺那么做仅仅为了省事,少写几句初始化代码,哈
如果是 ASP.NET 只需在返回的 DataTable 或 DataView 中增加一列 intial,当然这列应该是从数据库查出来的!
intial 不必添加到 option 上,保存在对象数组中即可,仅用于筛选。
俺那么做仅仅为了省事,少写几句初始化代码,哈
#16
连动的可以按这个写
http://www.pigcode.com/dispbbs.asp?boardid=7&id=210
http://www.pigcode.com/dispbbs.asp?boardid=7&id=210