zoukankan      html  css  js  c++  java
  • 下拉列表框只能选择,我想选择后还可以允许用户对选择的内容进行修改,如何实现可编辑的下拉列表框? PENGHAO

    借花献佛:
    <html>

    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>可编辑下拉框</title>
    <style>
    a{color:blue;text-decoration:none}
    a:hover{color:red}
    </style>
    </head>

    <body>

    <table style="border:2px outset;background-color:#d2e8FF" width="250" height="100" align="center">
      <tr>
        <td width="100%" align="center" colspan="2"><b>可编辑下拉框</b></td>
      </tr>
      <tr>
        <td width="60%" height="30" align="center">
    <select name="fason">
    <option value="可编辑下拉框">可编辑下拉框</option>
    <option value="作者:阿信">阿信</option>
    </select>
        </td>
        <td width="40%" height="30" align="left">
        <input type=button value=" 取值 " onclick="alert(document.getElementsByName('combox_fason')[0].value)">
    </td>
      </tr>
    </table>

    <script language="javascript">
    /*
    作者:fason(阿信)
    日期:2003-7-1
    版本:v1.0
    备注:只作技术交流,如需转载请注明作者等有关信息,多谢合作
    */
    function combox(obj,select){
    this.obj=obj
    this.name=select;
    this.select=document.getElementsByName(select)[0];
    /*要转换的下拉框*/
    }

    /*初始化对象*/
    combox.prototype.init=function(){
    var inputbox="<input name='combox_"+this.name+"' onchange='"+this.obj+".find()' "
    inputbox+="style='position:absolute;"+(this.select.offsetWidth-16)+";height:"+this.select.offsetHeight+";left:"+getL(this.select)+";top:"+getT(this.select)+"'>"
    document.write(inputbox)
    with(this.select.style){
    left=getL(this.select)
    top=getT(this.select)
    position="absolute"
    clip="rect(0 "+(this.select.offsetWidth)+" "+this.select.offsetHeight+" "+(this.select.offsetWidth-18)+")"
    /*切割下拉框*/
    }
    this.select.onchange=new Function(this.obj+".change()")
    this.change()

    }
    /*初始化结束*/

    ////////对象事件定义///////
    combox.prototype.find=function(){
    /*当搜索到输入框的值时,下拉框自动定位*/
    var inputbox=document.getElementsByName("combox_"+this.name)[0]
    with(this.select){
    for(i=0;i<options.length;i++)
    if(options[i].text.indexOf(inputbox.value)==0){
    selectedIndex=i
    this.change();
    break;
    }
    }
    }

    combox.prototype.change=function(){
    /*定义下拉框的onchange事件*/
    var inputbox=document.getElementsByName("combox_"+this.name)[0]
    inputbox.value=this.select.options[this.select.selectedIndex].text;
    with(inputbox){select();focus()};
    }
    ////////对象事件结束///////

    /*公用定位函数(获取控件绝对坐标)*/
    function getL(e){
    var l=e.offsetLeft;
    while(e=e.offsetParent)l+=e.offsetLeft;
    return l
    }
    function getT(e){
    var t=e.offsetTop;
    while(e=e.offsetParent)t+=e.offsetTop;
    return t
    }
    /*结束*/
    </script>
    <script language="javascript">
    var a=new combox("a","fason")
    a.init()
    /*作用方法:
    var obj=new combox(var1,var2)
    var1:新生成的combox变量(如:a)
    var2:原下拉框的name
    obj.init():对象初始化
    注意:后台取值时用combox_var2进行取值
    */
    </script>
    <p align="right">作者:<a href="http://fason.nease.net">fason(阿信)</a>欢迎交流!</p>
    </body>

    </html>

    下面这段代码更强!

    <input type="text" name="t">
    <select name="s" onChange="t.value=this.options[this.selectedIndex].value;">
    <option>-----------</option>
    <option value="test">test</option>
    <option value="haha">haha</option>
    </select>

    /////////////////////////////////还有
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style>
    .table1{background-color:white;FONT-FAMILY: Courier New, Courier;font-size:12px}
    .td_out{FONT-FAMILY: Courier New, Courier;font-size:12px;color:#000000;height:15px;border:1px solid #ffffff;}
    .td_over{FONT-FAMILY: Courier New, Courier;font-size:12px;cursor:default;background-color:#3366cc;border:1px solid #000000;color:#ffffff;height:15px}
    .slv{vertical-align:bottom;FONT-FAMILY: Courier New, Courier;font-size:12px;border-left-0;border-top-0;border-bottom-0;border-right:0px solid #000000;vertical-align:middle;height:18px;color:#000000}
    .down{position:relative;left:-2px;font-size:11px;vertical-align:middle;16;height:16;color:#2050b0;background-color:#D0DFF7;border:1px solid #9fA3Ce;writing-mode:tb-rl;font-weight:bold
    }
    .seldiv{
    position:absolute;z-index:1000;overflow-x:hidden;border-left:1px solid #000000;border-bottom:1px solid #000000;border-right:1px solid #000000;
    SCROLLBAR-FACE-COLOR: #d0dff7;
    SCROLLBAR-HIGHLIGHT-COLOR: #d0dff7;
    SCROLLBAR-SHADOW-COLOR: #FFFFFF;
    SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;
    SCROLLBAR-ARROW-COLOR: #ffffff;
    SCROLLBAR-TRACK-COLOR: #ffffff;
    SCROLLBAR-DARKSHADOW-COLOR: #d0dff7}
    </style>
    <script language="JavaScript">
    document.onclick=hiddenDiv;
    function getDivCount() {
     var arr=document.all;
     re=0;
     for (i=0;i<arr.length;i++) {
      str=arr[i].id; 
      if (str.indexOf("ZfDiv_")==0) {  
       re++; 
      }
     }
     return re;
    }

    function getI(ObjId) {//取得objId的最后一位数字
     for (i=0;i<ObjId.length;i++) {
      if (ObjId.charAt(i)=="_") return ObjId.substr(i+1,ObjId.length-1);
     }
     return 0;
    }

    function select_edit(TextObj){//鼠标经过高亮度
     TextObj.focus();TextObj.select();
    }

    function checkValue(ID){  
     var sl=document.all["ZfText_"+ID];
     var sv=document.all["ZfDiv_"+ID];
     var da=document.all["ZfData_"+ID];  
     sv.style.display=''
     
     for(i=0;i<da.rows.length;i++)da.rows[i].style.display=''
     
     for(i=0;i<da.rows.length;i++){
      if(da.rows[i].cells[0].innerText.indexOf(sl.value)!=0)da.rows[i].style.display='none';
      getPosition(ID);
     }
    }

    function getL(e){
     var l=e.offsetLeft;
     while(e=e.offsetParent){
      l+=e.offsetLeft;
     }
     return l
    }
    function getT(e){
     var t=e.offsetTop;
     while(e=e.offsetParent){
      t+=e.offsetTop;
     }
     return t
    }

    function getPosition(ID){
     var sv=document.all["ZfDiv_"+ID];
     var sl=document.all["ZfText_"+ID];
     var spn=document.all["ZfSpan_"+ID];
     var da=document.getElementById("ZfData_"+ID);
     sv.style.pixelWidth=spn.offsetWidth;
     da.style.pixelWidth=sv.offsetWidth;
     sv.style.pixelLeft=getL(spn);
     sv.style.pixelTop=getT(spn)+sl.offsetHeight+3;
     if(da.offsetHeight>200){
      sv.style.pixelHeight=200;
      sv.style.overflowY='scroll';
     }
     else {
      sv.style.pixelHeight=da.offsetHeight;
      sv.style.overflowY='hidden';
     }
    }

    function dropDown(ID){
     var sv=document.all["ZfDiv_"+ID]
     var tb=document.all["ZfData_"+ID]
     
     if(sv.style.display=='none'){ 
      sv.style.display=''; 
      for(i=0;i<tb.rows.length;i++)tb.rows[i].style.display=''
      getPosition(ID); 
     } else { 
      sv.style.display='none';
     }
    }//下拉摸拟层

    function hiddenDiv(){
     var o=window.event.srcElement.id;
     var tb
     var sv
     if(o=="") {
      for (j=0;j<getDivCount();j++) {
       tb=document.getElementById('ZfData_'+j);
       sv=document.getElementById('ZfDiv_'+j);  
       for(i=0;i<tb.rows.length;i++) tb.rows[i].style.display='';
       sv.style.display='none';  
      }
     
     }

    }//隐藏模拟层


    function setValue(obj){
    var i=getI(obj.parentElement.parentElement.parentElement.id);
    //alert(obj.parentElement.parentElement.parentElement.id);

    var sl=document.all["ZfText_"+i];
    var sv=document.all['ZfDiv_'+i];
    sl.value=obj.innerText;
    sv.style.display='none';
    //sldIndex=obj.parentElement.rowIndex;
    }//给文本框赋值

    function over(obj){
     obj.className="td_over"
     obj.title=obj.innerText
     obj.focus();
    }//鼠标经过变色

    function out(obj){
     obj.className="td_out"
    }//鼠标离开还原

    function String.prototype.Trim(){return this.replace(/(^\s*)|(\s*$)/g,'')}//自定义去空格函数Trim()


    //增加list的接口,ID表示该组控件是页面中的第几个
    function add(v,ID){
    var sv=document.all['ZfDiv_'+ID];
    if(!v.Trim()){return;}
    var tb=document.all['ZfData_'+ID];
    var c=tb.insertRow(tb.rows.length).insertCell();
    c.innerHTML='<nobr>'+v.Trim()+'</nobr>';
    c.onmouseover=new Function("over(this)");
    c.onmouseout=new Function("out(this)");
    c.onclick=new Function("setValue(this)");
    c.className="td_out";
    v='';
    }
    //增加inpnubox的接口,在页面中产生一个inputbox控件,下拉列表为空
    function addText(name,DefValue) {
     var i=getDivCount();
     document.write('<span id="ZfSpan_'+i+'" style="border:1 solid #9CA0CB">');
     document.write('<input type="text" value="'+DefValue+'" name="'+name+'" id="ZfText_'+i+'" ondblclick="ZfDrop_'+i+'.click()" class="slv" onmouseover="select_edit(this)"  onkeyup="checkValue('+i+')"><input type=button id="ZfDrop_'+i+'" value=">" onclick="this.hideFocus=true;dropDown('+i+');" class="down" onmouseover="this.style.backgroundColor=#EEF3FD" onmouseout="this.style.backgroundColor=\'\'" onmousedown="this.style.backgroundColor=#ABC4F5" onmouseup="this.style.backgroundColor=\'\'"></span>');
     document.write('<div id="ZfDiv_'+i+'" class="seldiv" style="display:none;"><table id="ZfData_'+i+'" onselectstart="return false" border="0"  cellspacing="0" cellpadding="0" class="table1"></table></div>');
    }

    </script>
    </head>
    <body>

    <script language="JavaScript">
    addText("name1","a");
    add("1234",0);
    add("1234",0);
    addText("name1","a");
    add("1234",1);
    add("1234",1);
    </script>
    </body>
    </html>

  • 相关阅读:
    asp.net 页面元素分析搜集
    ASP.NET AJAX深入浅出系列UpdatePanel的使用笔记(上)
    用sql语句来管理数据库日志问题
    C# .NET学习网站(转)
    Visual Studio .Net团队开发[转]
    sql 语句大全
    Word中快速操作的10个技巧
    嫁给程序员的好处
    关于手机病毒时代到来的担忧
    自己工作用过的SQL代码(1)
  • 原文地址:https://www.cnblogs.com/Dove/p/111702.html
Copyright © 2011-2022 走看看