`
jessen163
  • 浏览: 465542 次
  • 性别: Icon_minigender_1
  • 来自: 潘多拉
社区版块
存档分类
最新评论

HTML可输可选下拉框实现的JavaScript脚本

阅读更多
HTML可输可选下拉框实现的JavaScript脚本
关键字: javascript html可输可选下拉框
在写页面时,我们有时会有这样的需求,要下拉框可选可输入,该脚本就是可输可选控件.该脚本是根据网上某大侠源脚本改编而成,现记录在此,以备后用.

新增功能: 支持模糊定位、支持上下箭选择、支持注释层功能、支持按回车键从下拉框中选择选项   

Js代码

//下拉框选项所对应的层的名字   
var SELECT_DIV="SELECT_DIV_";   
  
//注释层的名字   
var NODE_DIV="NODE_DIV_";   
var textObject;   
  
//焦点是否在选择层上:初始时为false,表示默认不在选择层上   
//主要防止鼠标点击选择项时,文本框会失去焦点,这样选择层就会跟着隐藏,此时还未   
//让点击的选择项选中并赋值到文本框中去。此时可以设置鼠标在选择层上时cursorInSelectDivObj=ture   
//这时点击时不会立即隐藏选择层,等选中后再设置cursorInSelectDivObj=false,此时就可以隐藏选择层了   
var cursorInSelectDivObj=false;   
  
//是否是ie浏览器   
var ie=(document.getElementById && document.all);   
  
//全局的注释数组   
var noteArr = new Array();   
  
  
//以防名字已存在,循环取名,先判断是否存在"Textselectshow_Div"的对象,   
//如果存在,则重新取名为"Textselectshow_Div1",如果"Textselectshow_Div1"   
//还是存在,则取名为"Textselectshow_Div2",依次类推:"Textselectshow_Div..."   
for(var i=0;document.getElementById(SELECT_DIV)!=null;i++){    
    var tmpNm = SELECT_DIV + i;   
    //如果存在同名的,则以重新取名为 Textselectshow_Div + i ,如果Textselectshow_Div + i   
    //存在,则循环取名为 Textselectshow_Div + i + 1,直到不重名为止。如果存在,则赋值为本身再循环   
    SELECT_DIV=(document.getElementById(tmpNm)==null)?tmpNm:SELECT_DIV;   
}   
  
//以同样的命名方式为注释层取名   
for(var i=0;document.getElementById(NODE_DIV)!=null;i++){   
    var tmpNm = NODE_DIV + i;   
    NODE_DIV=(document.getElementById(tmpNm)==null)?tmpNm:NODE_DIV;   
}   
  
//为隐藏下拉框创建一个对应的层,并且刚初始化时为隐藏的   
document.write ('<div id="' + SELECT_DIV + '" style="position: absolute;'  
                                + 'cursor: default;border: 1px solid #B2B2B2;background-color: #fff;display: none;"></div>')   
//同样方式创建一个注释层   
document.write ('<div id="' + NODE_DIV + '"  style="position: absolute;'  
                                + 'cursor: default;border: 1px solid #B2B2B2;background-color:#ffffd9;display: none;'  
                                + 'overflow-x:auto;word-wrap:break-word"></div>')   
  
// 获取某对象的坐标   
function getObjPosition(Obj){   
    try{           
        var sumTop=0;   
        var sumLeft=0;   
           
        while(Obj!=window.document.body){   
            sumTop+=Obj.offsetTop;   
            sumLeft+=Obj.offsetLeft;       
            Obj=Obj.offsetParent;   
        }   
        return {left:sumLeft,top:sumTop};   
    }catch(e){alert(e);}   
}   
  
//处理Div中的选项/* 某个选项,文本框的ID */   
function optionDivOnmouseover(optionDivObj,textId){   
    //文本框   
    var textObj=document.getElementById(textId);   
  
    //optionDivObj.parentNode为某select option选项所对应层的父对象,即SELECT_DIV层   
    //得到select下拉框所有option选项所对应的层   
    var objChilddiv=optionDivObj.parentNode.getElementsByTagName("div");   
       
    //清空所有选项层的样式,即去掉原来背景为蓝色的选项层的样式   
    for(var i=0; i < objChilddiv.length; i++){   
        objChilddiv[i].style.cssText='';   
    }   
       
    //使本身选项层的背景为蓝色,字为白色,模拟选中样式   
    optionDivObj.style.cssText='background-color: #330066;color: #ffffff;'  
       
    var noteDivObj =document.getElementById(NODE_DIV);   
    var selectDivObj =document.getElementById(SELECT_DIV);   
       
    ///////设置注释层中的选项及位置   
    setNoteDivObj(textObj,optionDivObj,selectDivObj,noteDivObj);       
    
    //点击某个选项层时   
    optionDivObj.onclick=function(){   
  
        //点击选项后选择层后要隐藏,即要设置成失去焦点状态   
        cursorInSelectDivObj=false;   
           
        //把选中的某选项层的内容赋值为文本框   
        if(ie){   
            textObj.value=optionDivObj.outerText;      
        }   
        else  
        {   
            textObj.value=optionDivObj.textContent;   
        }   
           
        //var noteDivObj =document.getElementById(NODE_DIV);   
           
        //点击某个选项层时,对应的注释层也要隐藏   
        noteDivObj.style.display='none';           
  
        //点击过后使文本框获取焦点   
        textObj.focus();   
  
        ////////调用文本框失去焦点触发的方法   
        textObjectBlur(selectDivObj,noteDivObj);           
    }   
}   
  
/**  
* textObj:文本框  
* seleObj:下拉框  
* noteArr:noteArr 注釋數組,沒有可以不传或为null或空数组  
*/  
function showSelect(textObj,seleObj,arrNote){      
    textObject = textObj;   
       
    //保存全局注释,供其他方法使用   
    noteArr = arrNote;   
    var selectDivObj =document.getElementById(SELECT_DIV);   
    var noteDivObj =document.getElementById(NODE_DIV);   
    var seleObj =document.getElementById(seleObj);   
       
  
    ///////鼠标移出下拉框层时   
    selectDivObj.onmouseout=function(){        
        //当鼠标移出选择层时,设置选择层为失去焦点状态       
        cursorInSelectDivObj=false;   
           
        //当鼠标移出选择层时,让文本框获取焦点   
        textObj.focus();   
    }   
       
    ///////文本框失去焦点时   
    textObj.onblur=function(){   
        textObjectBlur(selectDivObj,noteDivObj);           
    }   
       
    ///////鼠标经过下拉框层时   
    selectDivObj.onmouseover=function(){   
        //当鼠标移进选择层时,设置选择层为获得焦点状态       
        cursorInSelectDivObj=true;   
    }   
           
    ///////文本框点击时   
    textObj.onclick=function(){   
        //设置下拉框对应层中的选项及位置   
        setSelectDivObj(textObj,selectDivObj,seleObj);   
  
        //设置注释层中的选项及位置   
        setNoteDivObj(textObj,null,selectDivObj,noteDivObj);   
           
        //自动匹配与模糊定位   
        autoMatch(textObj,selectDivObj);       
    }   
       
    ///////文本框上输入时   
    textObj.onkeyup=function(){   
        //如果按的是Tab键时直接退出   
        if(event.keyCode==9){   
            return false;   
        }   
           
        if(event.keyCode==13){   
            enter(textObj,selectDivObj,noteDivObj);    
            return false;   
        }   
       
        //设置下拉框对应层中的选项及位置   
        setSelectDivObj(textObj,selectDivObj,seleObj);   
           
        //如果按了上下键时   
        if(event.keyCode == 38 || event.keyCode == 40 ){   
            var selectedOptionDiv = downOrUp(textObj,selectDivObj,noteDivObj,seleObj);         
            //设置注释层中的选项及位置   
            setNoteDivObj(textObj,selectedOptionDiv,selectDivObj,noteDivObj);          
        }else{   
            //设置注释层中的选项及位置   
            setNoteDivObj(textObj,null,selectDivObj,noteDivObj);           
        }      
           
        //自动匹配与模糊定位   
        autoMatch(textObj,selectDivObj);   
    }   
}   
  
// 隐藏遮挡ID为objID的对象(层)的所有select   
function hiddenOverSelects(objID){   
    var sels = document.getElementsByTagName('select');    
    for (var i = 0; i < sels.length; i++){   
        if (obj1OverObj2(document.getElementById(objID), sels[i])){   
            sels[i].style.visibility = 'hidden';       
        }else{   
            sels[i].style.visibility = 'visible';      
        }          
    }   
}   
  
//判断obj1是否遮挡了obj2   
function obj1OverObj2(obj1, obj2){   
    var pos1 = getObjPosition(obj1)    
    var pos2 = getObjPosition(obj2)    
    var result = true;    
    var obj1Left = pos1.left - window.document.body.scrollLeft;    
    var obj1Top = pos1.top - window.document.body.scrollTop;    
    var obj1Right = obj1Left + obj1.offsetWidth;    
    var obj1Bottom = obj1Top + obj1.offsetHeight;   
    var obj2Left = pos2.left - window.document.body.scrollLeft;    
    var obj2Top = pos2.top - window.document.body.scrollTop;    
    var obj2Right = obj2Left + obj2.offsetWidth;    
    var obj2Bottom = obj2Top + obj2.offsetHeight;   
       
    if (obj1Right <= obj2Left || obj1Bottom <= obj2Top ||    
    obj1Left >= obj2Right || obj1Top >= obj2Bottom)    
    result = false;    
    return result;    
}   
  
  
//文本框失去焦点时调用的方法   
function textObjectBlur(selectDivObj,noteDivObj){   
        //如果点击了某个选项后,已设置选择层为失去焦点状态,此时选择层可以隐藏了   
        if(!cursorInSelectDivObj){   
            selectDivObj.style.display='none';   
        }   
           
        if(ie){   
            //恢复所有已被隐藏的下拉框   
            hiddenOverSelects(selectDivObj.id);    
            if(noteDivObj.style.display=='inline'){   
                noteDivObj.style.display=selectDivObj.style.display;   
            }   
               
            if(selectDivObj.style.display=='none'){   
                noteDivObj.style.display='none';   
            }   
        }      
}   
  
//设置下拉框对应层中的选项及层位置   
function setSelectDivObj(textObj,selectDivObj,seleObj){   
    //如果已显示,则直接退出   
    if(selectDivObj.style.display=='inline'){   
        return false;   
    }   
  
    //如果文本框的id为空时,则要命名   
    for(var i=0;textObj.id=='';i++){   
        var tmpNm = "textSelect" + i;   
        textObj.id = (document.getElementById(tmpNm)==null)?tmpNm:'';   
    }   
  
    selectDivObj.style.left = getObjPosition(textObj).left;   
    selectDivObj.style.top = getObjPosition(textObj).top + textObj.offsetHeight;   
    selectDivObj.style.width = textObj.offsetWidth;   
    selectDivObj.style.height = '';   
    selectDivObj.style.overflowY = '';   
    selectDivObj.innerHTML=''    
     
    //读取select的项目放到Div里。   
    for(var x = 0; x<seleObj.options.length; x++){   
        selectDivObj.innerHTML+="<div onmouseover=\"optionDivOnmouseover(this,'"    
        + textObj.id    
        + "')\" style='width:100%;white-space: nowrap;cursor: default;'>"  
        +seleObj.options[x].text+"</div>";   
    }   
       
    //调整Div高度,过度显示滚动条   
    if(x > 8){   
        selectDivObj.style.height=13 * 8;   
        selectDivObj.style.overflowY='auto';   
    }else{   
        selectDivObj.style.height=15 * x;   
        selectDivObj.style.overflowY='auto';   
    }   
    
    selectDivObj.style.display='inline';   
    if(ie){   
        hiddenOverSelects(selectDivObj.id);   
    }   
}   
  
//设置下拉框对应层中的选项及层位置   
function setNoteDivObj(textObj,optionDivObj,selectDivObj,noteDivObj){   
  
     //如果需要显示对应键的注释时   
    if(noteArr != null && noteArr != undefined){   
               
            //获取下拉框所对应的层的宽度与左边距   
            var regStr = new RegExp("(([0-9]+)px)");           
            selectDivObj.style.width.match(regStr);   
            var width=RegExp.$2;   
            regStr = new RegExp("(([0-9]+)px)");   
            selectDivObj.style.left.match(regStr);   
            var left= RegExp.$2;   
            //设置注释层的位置与大小   
            noteDivObj.style.left=parseInt(width) +parseInt(left);   
            noteDivObj.style.top=selectDivObj.style.top;               
            noteDivObj.style.width=width*1;   
            noteDivObj.style.height=selectDivObj.style.height;   
           
            var i = 0;             
  
            //如果找到对应的注释,则显示注释层   
            for(i = 0;i < noteArr.length;i++){   
                if(optionDivObj==null && textObj.value == noteArr[i][0]){   
                    noteDivObj.innerText=noteArr[i][1];   
                    noteDivObj.style.display="inline";   
                    break;   
                }else if(optionDivObj !=undefined    
                    && optionDivObj !=null    
                    && optionDivObj.outerText == noteArr[i][0]){   
                    noteDivObj.innerText=noteArr[i][1];   
                    noteDivObj.style.display="inline";   
                    break;   
                }   
            }   
               
            if(i==noteArr.length){                 
                noteDivObj.innerText='';   
                noteDivObj.style.display="none";   
            }   
       
    }   
}   
  
//自动匹配选项中符合文本框中输入的值的记录   
function autoMatch(textObj,selectDivObj){   
    if(textObj.value==''){   
    return null;   
  }   
     
  if(event.keyCode == 38 || event.keyCode == 40 ){   
    return null;   
  }    
  
    return autoMatch_(textObj,selectDivObj);   
}   
  
//String.fromCharCode   
function autoMatch_(textObj,selectDivObj){   
  var objChilddiv=selectDivObj.getElementsByTagName("div");     
  var arr = new Array();   
  //清除所有层的样式   
  for(var x=0;x<objChilddiv.length;x++){   
    objChilddiv[x].style.cssText='';   
  }   
       
  
    var selectOptionDivObj = null;   
    var textValueReg = replaceReg(textObj.value);   
       
    for(var x=0;x<objChilddiv.length;x++){   
        var strChilddiv=(ie)?objChilddiv[x].outerText:textObj.textContent;   
        var regRegExp = new RegExp('^'+textValueReg);      
        //alert('^'+textValueReg + "   " + strChilddiv + "   " + textObj.value);   
           
        //先模糊匹配   
        if(regRegExp.test(strChilddiv)){   
            //让模糊匹配到的选项上移   
            selectDivObj.scrollTop=objChilddiv[x].offsetHeight*x;          
               
            //再精确匹配,且让精确匹配的成选中状态   
            if(strChilddiv==textObj.value){   
                arr[0]=objChilddiv[x];   
                arr[1]=x;   
                objChilddiv[x].style.cssText='background-color: #330066;color: #ffffff;';      
                break;   
            }else{   
                objChilddiv[x].style.cssText='';   
            }   
            break;   
        }else{   
            objChilddiv[x].style.cssText='';   
        }   
        textObj.focus();   
    }   
  
    return arr;   
}   
  
  
//上下翻   
function downOrUp(textObj,selectDivObj,noteDivObj,seleObj){   
  
    //得到select下拉框所有option选项所对应的层   
    var objChilddiv=selectDivObj.getElementsByTagName("div");   
       
    if(objChilddiv.length == 0){   
        return null;   
    }   
    var selectedOptionDiv;   
       
    var hig = 0;   
    if(event.keyCode==38){   
        selectedOptionDiv = objChilddiv[objChilddiv.length -1];    
        hig = objChilddiv.length -1;   
    }else if(event.keyCode==40){   
        selectedOptionDiv = objChilddiv[0];   
        hig = 0;   
    }else{   
        selectedOptionDiv = objChilddiv[0];   
    }   
    var i=0;   
    //清空所有选项层的样式,即去掉原来背景为蓝色的选项层的样式   
    for(i=0; i < objChilddiv.length; i++){          
        if(objChilddiv[i].style.backgroundColor=='#330066'){               
            if(event.keyCode==38){   
                if(i != 0){   
                    selectedOptionDiv = objChilddiv[i - 1];   
                    hig = i - 1;   
                }else{   
                    selectedOptionDiv = objChilddiv[objChilddiv.length - 1];   
                    hig = objChilddiv.length -1;   
                }                  
            }else if(event.keyCode==40){   
                if(i != (objChilddiv.length -1)){   
                    selectedOptionDiv = objChilddiv[i + 1];   
                    hig = i + 1;   
                }else{   
                    selectedOptionDiv = objChilddiv[0];   
                    hig = 0;   
                }                  
            }              
            objChilddiv[i].style.cssText='';               
            break;   
        }   
    }   
       
    //解决用上下键弹出下拉列表时,让列表中与文本框相同值的选项选中   
    if(i==objChilddiv.length){   
           
        //自动匹配与模糊定位   
        var selectOption = autoMatch_(textObj,selectDivObj);   
           
        if(selectOption.length != 0){   
            //设置注释层中的选项及位置   
            setNoteDivObj(textObj,selectOption,selectDivObj,noteDivObj);   
            selectedOptionDiv = selectOption[0];   
            hig = selectOption[1];   
        }   
    }   
       
    selectDivObj.scrollTop=selectedOptionDiv.offsetHeight*hig;   
  
    //使本身选项层的背景为蓝色,字为白色,模拟选中样式   
    selectedOptionDiv.style.cssText='background-color: #330066;color: #ffffff;'  
  
    textObj.focus();   
    
    return selectedOptionDiv;   
}   
  
  
//回车   
function enter(textObj,selectDivObj,noteDivObj){   
    if(selectDivObj.style.display=='none'){   
        return false;   
    }      
       
    //得到select下拉框所有option选项所对应的层   
    var objChilddiv=selectDivObj.getElementsByTagName("div");   
       
    if(objChilddiv.length == 0){   
        return false;   
    }   
    var selectedOptionDiv;   
       
           
    //清空所有选项层的样式,即去掉原来背景为蓝色的选项层的样式   
    for(var i=0; i < objChilddiv.length; i++){          
        if(objChilddiv[i].style.backgroundColor=='#330066'){               
            textObj.value=(ie)?objChilddiv[i].outerText:objChilddiv[i].textContent;   
            //回车时相当于点击了某个选项,此时设置选择层为失去焦点状态   
            //再调用文本框失去焦点方法textObjectBlur让选择层隐藏   
            cursorInSelectDivObj=false;   
            textObjectBlur(selectDivObj,noteDivObj);   
            break;   
        }   
    }   
}   
  
var regChars = new Array();   
regChars[0]=new Array();   
regChars[0][0]="$";   
regChars[0][1]="\\$";   
regChars[1]=new Array();   
regChars[1][0]="(";   
regChars[1][1]="\\(";   
regChars[2]=new Array();   
regChars[2][0]=")";   
regChars[2][1]="\\)";   
regChars[3]=new Array();   
regChars[3][0]="*";   
regChars[3][1]="\\*";   
regChars[4]=new Array();   
regChars[4][0]="+";   
regChars[4][1]="\\+";   
regChars[5]=new Array();   
regChars[5][0]=".";   
regChars[5][1]="\\.";   
regChars[6]=new Array();   
regChars[6][0]="[";   
regChars[6][1]="\\[";   
regChars[7]=new Array();   
regChars[7][0]="?";   
regChars[7][1]="\\?";   
regChars[8]=new Array();   
regChars[8][0]="]";   
regChars[8][1]="\\]";   
regChars[9]=new Array();   
regChars[9][0]="^";   
regChars[9][1]="\\^";   
regChars[10]=new Array();   
regChars[10][0]="|";   
regChars[10][1]="\\|";   
regChars[11]=new Array();   
regChars[11][0]="{";   
regChars[11][1]="\\{";   
regChars[12]=new Array();   
regChars[12][0]="}";   
regChars[12][1]="\\}";   
regChars[13]=new Array();   
regChars[13][0]="\\";   
regChars[13][1]="\\\\";   
  
//代换正则表达式中特殊字符   
function replaceReg(str){   
           
        //$()*+.[?]^|}{\   
        var regStr =/[$()*+.\[?\]^|}{\\]/g;   
           
        if(!str.match(regStr)){   
            return str;   
        }   
  
        var regArr =/./g;   
        var valueArr = str.match(regArr);   
        var tempStr = "";   
  
        for(var i = 0 ; i < valueArr.length; i++){              
            regStr =/[$()*+.\[?\]^|}{\\]/g;   
                   
            if(valueArr[i].match(regStr)){             
                valueArr[i] = findByKey(valueArr[i])[1];   
            }   
               
            tempStr = tempStr + valueArr[i];   
        }   
  
        return tempStr;   
}   
  
//查询正则特殊字符要替换字符串   
function findByKey(key){   
    var i = 0;   
    for(var i = 0; i < regChars.length; i++){   
        if(regChars[i][0]==key){   
            return regChars[i];   
        }   
    }   
    if(i == regChars.length ){   
        return null;   
    }   
}   
  
//在最后一个输入元素上按回车键时自动提交   
function keydownOnSelectInput(){   
  
    if(event.srcElement.type == undefined){   
        return;   
    }      
    var type = event.srcElement.type.toLowerCase();   
    if(event.keyCode!=13    
    || type=='button'    
    || type=='submit'    
    || type=='reset'    
    || type=='textarea'    
    || type==''){   
        return;   
    }   
       
    var noteDivObj =document.getElementById(NODE_DIV);   
    var selectDivObj =document.getElementById(SELECT_DIV);   
       
    if(event.srcElement.nextSibling != null    
    && event.srcElement.nextSibling.type=='select-one'  
    && selectDivObj.style.display=='inline'){   
           
        var objChilddiv=selectDivObj.getElementsByTagName("div");   
        var i=0;   
        for(i=0; i < objChilddiv.length; i++){          
            if(objChilddiv[i].style.backgroundColor=='#330066'){   
                break;   
            }   
        }   
           
        //在可选可输入文本框上按回车时,如果下拉列表中没有选中项,则直接跳到下一输入元素   
        if(i == objChilddiv.length){   
            cursorInSelectDivObj=false;   
            textObjectBlur(selectDivObj,noteDivObj);   
            event.keyCode=9;   
        }else{   
            event.returnValue=false;   
        }   
        return;   
    }   
       
           
    var srcForm = event.srcElement.form;   
  
    if(srcForm == undefined || srcForm == null){   
            return ;   
    }   
       
       
    var srcForm = event.srcElement.form;   
    var srcElementNext = null;   
  
    var allElems = srcForm.elements;   
    for(var i = 0; i < allElems.length; i++){   
        if(event.srcElement == allElems[i]){   
            if(!isLastElem(allElems,i+1)){                     
                    event.keyCode=9;   
                    break;   
            }else {                
                if(event.srcElement.type=='select-one'){   
                    var subButton = findSubmitButton(allElems,i);   
                    if(subButton !=null){   
                        subButton.click();   
                    }                  
                }                  
            }   
        }   
    }   
  
}   
  
//查找提交按钮   
function findSubmitButton(allElems,index){   
    for(var i = index; i < allElems.length; i++){   
            if(allElems[i].type=='submit'){   
                return  allElems[i];   
            }   
    }   
       
    return null;   
}   
  
//判断是否是最后一个元素   
function isLastElem(allElems,index){   
       
    if(index >=allElems.length || allElems[index].type=="submit" ){         
        return true;   
    }   
       
    for(var i = index; i < allElems.length; i++){   
        var tempObj = allElems[i];   
        while(tempObj != window.document.body){   
            //如果该元素未隐藏,则判断父元素是否隐藏   
            if(tempObj.style.display != 'none'){   
                tempObj=tempObj.parentElement;   
            }else{   
                //如果输入元素隐藏,则递归查找其他输入元素是否隐藏   
                return isLastElem(allElems,i+1);       
            }              
        }   
           
        //如果某输入元素本身未隐藏,且其父也未隐藏,则不是最后一输入元素   
        if(tempObj == window.document.body){   
            return false;   
        }   
    }          
}   
  
  
//自动绑定按键事件   
window.document.onkeydown = keydownOnSelectInput;   
window.onresize=function(){   
        if(textObject){   
            textObject.blur();   
        }   
}&
分享到:
评论

相关推荐

    复选下拉框

    下面将详细介绍复选下拉框及其相关的实现方法、组件和应用。 一、组件介绍 "下拉复选框"通常指的是一个可折叠的列表,用户可以点击打开,看到一系列可被勾选的选项。这个组件在各种Web应用程序、表单和交互式界面中...

    asp.net可输入可选择下拉框

    开发者可以通过查看和学习这些文件,了解具体的实现细节和技巧,以便在自己的项目中应用或改进这种可输入可选择的下拉框控件。 总之,"asp.net可输入可选择下拉框"是一种增强用户体验的设计,它通过结合传统的...

    使用JavaScript实现下拉框的动态控制

    ### 使用JavaScript实现下拉框的动态控制 #### 引言 在Web开发中,下拉框作为用户界面的重要组成部分,提供了高效的选择机制,允许用户从一组预设的选项中进行选择。然而,静态的下拉框往往无法满足复杂的业务需求...

    combox实现的可编辑下拉框

    本文将深入探讨如何使用JavaScript实现一个可编辑的下拉框,并阐述其核心知识点。 ### 1. 可编辑下拉框的概念 传统的下拉框允许用户从预定义的选项中进行选择,但不支持用户直接在框内输入自定义值。而可编辑...

    jsp/html 实现下拉复选框

    总之,"jsp/html 实现下拉复选框"是一个基础但实用的前端功能,通过合理的HTML结构、CSS样式和JavaScript脚本,我们可以创建出既美观又易用的下拉复选框组件,满足用户在网页上的多选项选择需求。在实际应用中,还...

    jquery实现的多选下拉框

    核心文件通常包括CSS样式表(如`multiselect.css`)和JavaScript脚本(如`jquery.multiselect.js`或`jquery.multiselect.min.js`)。我们需要在网页中引用这些资源,以确保插件正常工作。 安装完成后,我们可以通过...

    html分组多选单选下拉框.rar

    这些功能通常通过`&lt;select&gt;`标签实现,配合`&lt;optgroup&gt;`进行分组,以及`&lt;option&gt;`定义可选的项目。下面将详细介绍这些知识点。 ### 1. `&lt;select&gt;`标签 `&lt;select&gt;`标签用于创建一个下拉菜单,用户可以通过点击下拉...

    ajax实现可配置无刷新级联下拉框

    **Ajax 实现可配置无刷新级联下拉框** 在 Web 开发中,为了提供用户友好的交互体验,级联下拉框(Cascading Dropdown)是一个常见的需求。级联下拉框允许用户在一个下拉框中选择一个选项后,根据所选的选项动态更新...

    javascript经典特效---下拉框的新特性.rar

    通过JavaScript可以处理多选的逻辑,例如限制可选选项数量,或获取所有选中的选项值。 5. 模拟下拉框:JavaScript库如jQuery和Vue.js提供了更加灵活的组件,可以模拟出更加复杂的下拉框效果,如搜索过滤、分组选项...

    js 可输入下拉框(jquery)

    `&lt;select&gt;`可以有多个`&lt;option&gt;`子元素,每个`&lt;option&gt;`代表一个可选值。 2. **jQuery库**:jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理和动画效果。在这里,我们将用到jQuery来绑定事件、获取/设置...

    6种样式的下拉框

    这种多选下拉框可能带有复选框或者单选按钮,用户可以直观地看到已选中的项。 5. **搜索功能**: 对于包含大量选项的下拉框,可以添加搜索功能,让用户在输入关键词后快速找到所需选项,提升查找效率。 6. **...

    基于jquery实现的多选下拉框

    3. **jQuery代码**:接下来,编写jQuery脚本来实现多选下拉框的交互效果。我们可以监听按钮的点击事件,然后根据当前状态来切换下拉框的可见性。 ```javascript $(document).ready(function() { $("#...

    下拉框内容太多,使用Javascript快速选择

    在网页设计中,下拉框(Dropdown)是常见的交互元素,用于展示多个可选项供用户选择。然而,当下拉框中的选项数量过于庞大时,用户查找特定选项可能会变得非常耗时,严重影响用户体验。为了解决这个问题,我们可以...

    jQuery多选下拉框插件.rar

    在网页开发中,多选下拉框是一种常见的交互元素,用于提供用户多个可选项进行选择。本示例中,我们关注的是一个使用jQuery实现的多选下拉框插件,这个插件能够帮助开发者轻松地在项目中创建具有美观样式和易用功能的...

    php可输入下拉框控件

    为了实现一个可输入的下拉框,我们可以利用JavaScript或者jQuery库来增强原生的HTML下拉框。这样的控件允许用户在输入框中直接键入文本,同时仍然提供下拉列表供用户选择。当用户开始输入时,下拉框可以通过实时过滤...

    利益AJAX实现下拉框~无刷新

    在提供的"src"压缩包文件中,可能包含了实现这个功能的源代码,包括HTML模板、CSS样式和JavaScript脚本。通过查看和分析这些文件,你可以深入了解AJAX级联下拉框的具体实现细节,以及如何在实际项目中应用这些技术。...

    AJAX 动态下拉框

    - **HTML结构**:首先,我们需要创建一个HTML下拉框,通常是一个`&lt;select&gt;`元素,以及一个可选的输入框`&lt;input type="text"&gt;`,用户可以在其中输入关键词触发AJAX请求。 - **JavaScript初始化**:接着,我们需要...

    Js控制密保问题下拉框.pdf

    标题《Js控制密保问题下拉框.pdf》表明本文档涉及到使用JavaScript(Js)脚本语言实现对网页中密保问题下拉框(又称选择框、select box)的动态控制。密保问题下拉框是一种常见的网页交互元素,用户通过从下拉列表中...

    年月日联动下拉_日期_下拉框_

    每个下拉框将包含一系列的`&lt;option&gt;`标签,每个`&lt;option&gt;`代表一个可选值。例如,创建年份下拉框可能如下所示: ```html &lt;option value="2020"&gt;2020 ... ``` 接着,我们需要使用JavaScript或者jQuery来实现...

Global site tag (gtag.js) - Google Analytics