100 分求文本框录入的控件

xml结构???而且描述也不够清楚.最好能发个效果图

不是联动,
类似于日历控件.
只是.日历控件是选择时间而这个是选择树型内容.
<?xml version="1.0" encoding="utf-8" ?>
<Login Text="状态">
    <Character Text="表情">
        <C Text="热血" Value="0"></C>
        <C Text="弱气" Value="1"></C>
        <C Text="激情" Value="2"></C>
        <C Text="冷静" Value="3"></C>
        <C Text="冷酷" Value="4"></C>
    </Character>
    <Weapon Text="装备">
        <W Text="光束剑" Value="0"></W>
        <W Text="光束配刀" Value="1"></W>
    </Weapon>
    <EconomyProperty Text="特性">
        <P Text="平均型" Value="0"></P>
        <P Text="重视攻击" Value="1"></P>
        <P Text="重视敏捷" Value="2"></P>
        <P Text="重视防御" Value="3"></P>
        <P Text="重视命中" Value="4"></P>
    </EconomyProperty>
</Login>当焦点到文本上时出现状态. 点状态出现表情\装备\特性依次类推.....

根据你给的xml写的代码,你的xml结构稍微改了下
menu.xml
<?xml version="1.0" encoding="utf-8"?>
<Login Text="状态">
    <Item Text="表情">
        <C Text="热血" Value="0"></C>
        <C Text="弱气" Value="1"></C>
        <C Text="激情" Value="2"></C>
        <C Text="冷静" Value="3"></C>
        <C Text="冷酷" Value="4"></C>
    </Item>
    <Item Text="装备">
        <C Text="光束剑" Value="0"></C>
        <C Text="光束配刀" Value="1"></C>
    </Item>
    <Item Text="特性">
        <C Text="平均型" Value="0"></C>
        <C Text="重视攻击" Value="1"></C>
        <C Text="重视敏捷" Value="2"></C>
        <C Text="重视防御" Value="3"></C>
        <C Text="重视命中" Value="4"></C>
    </Item>
</Login>
test.htm
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=gb2312" />
    <title>Div-->Select</title>
  </head>
  <body>
  <input type="text" id="txt" onclick="ShowMenu()" style="height:20px"/>
  <div id="Menu" style="position:absolute;display:none">正在加载数据......</div>
  </body>
</html>
<script>
function ShowMenu()
{
  document.getElementById("Menu").style.display="";
}
var doc;
window.onload=function()
{
  if(document.implementation&&document.implementation.createDocument)
  {
    doc=document.implementation.createDocument('','',null);
    doc.onload=handler;
    doc.load("menu.xml");
  }
  else if(window.ActiveXObject)
  {
    doc=new ActiveXObject("Microsoft.XMLDOM");
    doc.onreadystatechange=function(){if(doc.readyState==4)handler();}
    doc.load("menu.xml");
  }
  else alert("XML创建出错！");
  InitMenuPosition();
}
function handler()
{
  var Id=0;
  var data="";
  var Menu=document.getElementById("Menu");
  var login=doc.getElementsByTagName("Login")[0];
  data+="<span onclick='ShowSubMenu("+Id+")'>"+login.getAttribute("Text")+"</span>";
  var item=login.getElementsByTagName("Item");
  data+="<div id='div"+Id+"' style='display:none'>";
  Id++;
  for(var i=0;i<item.length;i++)
  {
     data+="<span onclick='ShowSubMenu("+Id+")'>    "+item[i].getAttribute("Text")+"</span><br/>";
     data+="<div id='div"+Id+"' style='display:none'>";
     var c=item[i].getElementsByTagName("C");
     for(var j=0;j<c.length;j++)
     {
        data+="<span onclick='VToText(this.innerHTML)'>        "
          +c[j].getAttribute("Text")+"</span><br/>";
     }
     data+="</div>";
     Id++;
  }
  data+="</div>";
  Menu.innerHTML=data;
}
function InitMenuPosition()
{
  var o=getTxtPostion();
  var Menu=document.getElementById("Menu");
  Menu.style.top=o.y+20+"px";
  Menu.style.left=o.x+"px";
}
function getTxtPostion()
{
  var o=new Object();
  var txt=document.getElementById("txt");
  o.x=txt.offsetLeft;
  o.y=txt.offsetTop;
  var p=txt.offsetParent;
  while(p)
  {
    o.x+=p.offsetLeft;
    o.y+=p.offsetTop;
    p=p.offsetParent;
  }
  return o;
}function ShowSubMenu(Id)
{
  var Item=document.getElementById("div"+Id);
  if(Item.style.display=="none")
    Item.style.display="";
else
    Item.style.display="none";
}
function VToText(v)
{
  var reg=/ /gi
  v=v.replace(reg,"");
  document.getElementById("txt").value=v;
  document.getElementById("Menu").style.display="none";
}
</script>

别忘记结帖子啊,还有asp版块的,现在机子没有ff,只在ie下测试了,明天帮你测试ff.不过我想ff下应该也没有问题.menu.xml
<?xml version="1.0" encoding="gb2312"?>
<Login Text="状态">
    <Item1 Text="表情">
        <Item2 Text="热血" Value="0"></Item2>
        <Item2 Text="弱气" Value="1"></Item2>
        <Item2 Text="激情" Value="2"></Item2>
        <Item2 Text="冷静" Value="3"></Item2>
        <Item2 Text="冷酷" Value="4"></Item2>
    </Item1>
    <Item1 Text="装备">
        <Item2 Text="光束剑" Value="0"></Item2>
        <Item2 Text="光束配刀" Value="1"></Item2>
    </Item1>
    <Item1 Text="特性">
        <Item2 Text="平均型" Value="0"></Item2>
        <Item2 Text="重视攻击" Value="1"></Item2>
        <Item2 Text="重视敏捷" Value="2"></Item2>
        <Item2 Text="重视防御" Value="3"></Item2>
        <Item2 Text="重视命中" Value="4">
          <Item3 Text="Menu3">
            <Item4 Text="Menu4"></Item4>"
          </Item3>
        </Item2>
    </Item1>
</Login>test.htm
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=gb2312" />
    <title>Div-->Select</title>
  </head>
  <body>
  <input type="text" id="txt" onclick="ShowMenu()" style="height:20px"/>
  <div id="Menu" style="position:absolute;display:none">正在加载数据......</div>
  </body>
</html>
<script>
function ShowMenu()
{
  document.getElementById("Menu").style.display="";
}
var doc,data=document.createDocumentFragment(null);
window.onload=function()
{
  if(document.implementation&&document.implementation.createDocument)
  {
    doc=document.implementation.createDocument('','',null);
    doc.onload=handler;
    doc.load("menu.xml");
  }
  else if(window.ActiveXObject)
  {
    doc=new ActiveXObject("Microsoft.XMLDOM");
    doc.onreadystatechange=function(){if(doc.readyState==4)handler();}
    doc.load("menu.xml");
  }
  else alert("XML创建出错！");
  InitMenuPosition();
}
function handler()
{
  var Id=0;
  var Menu=document.getElementById("Menu");
  var login=doc.getElementsByTagName("Login")[0];
  var span=document.createElement("span");
  span.innerHTML="<b>+</b>"+login.getAttribute("Text");
  span.id=Id;
  span.onclick=function()
  {
    ShowSubMenu(this,this.id);
  }
  data.appendChild(span);
  var item=login.getElementsByTagName("Item1");
  var div=document.createElement("div");
  div.id="div"+Id;
  div.style.display="none";
  if(item.length>0)
  {
    seekNodes(item,Id,div);
  }
  else
  {
    div.innerHTML="==没有数据==";
  }
  data.appendChild(div);
  data.appendChild(document.createElement("br"));
  Menu.innerHTML="";
  Menu.appendChild(data);
}
//编历函数
function seekNodes(Nodes,Id,p)
{
  var space="",lev=0;
  var reg=/Item(\d+)/;//正则,用来取层数的
  var ms=Nodes[0].tagName.match(reg);
  lev=parseInt(ms[1],10);
  for(var j=0;j<lev;j++)
     space+="  ";
  for(var i=0;i<Nodes.length;i++)
  {
     var item=Nodes[i].getElementsByTagName("Item"+(lev+1));//下一层的节点
     if(item.length==0)//叶子节点
     {
        var span=document.createElement("span");
        span.innerHTML=space+Nodes[i].getAttribute("Text");
        span.onclick=function()
        {
          VToText(this.innerHTML);
        }
        p.appendChild(span);
        p.appendChild(document.createElement("br"));
     }
     else
     {
       Id++;
       var pspan=document.createElement("span");
       pspan.innerHTML=space+"<b>+</b>"+Nodes[i].getAttribute("Text");
       pspan.id=Id;
       pspan.onclick=function()
       {
         ShowSubMenu(this,this.id);
       }
       p.appendChild(pspan);
       p.appendChild(document.createElement("br"));
       var pdiv=document.createElement("div");
       pdiv.id="div"+Id;
       pdiv.style.display="none";
       p.appendChild(pdiv);
       seekNodes(item,Id,pdiv);  //继续遍历
     }
  }
  return data;
}
function InitMenuPosition()
{
  var o=getTxtPostion();
  var Menu=document.getElementById("Menu");
  Menu.style.top=o.y+20+"px";
  Menu.style.left=o.x+"px";
}
function getTxtPostion()
{
  var o=new Object();
  var txt=document.getElementById("txt");
  o.x=txt.offsetLeft;
  o.y=txt.offsetTop;
  var p=txt.offsetParent;
  while(p)
  {
    o.x+=p.offsetLeft;
    o.y+=p.offsetTop;
    p=p.offsetParent;
  }
  return o;
}function ShowSubMenu(span,Id)
{
  var Item=document.getElementById("div"+Id);
  var reg=/<b>\+?\-?<\/b>/gi;//正则表达式,要来替换+/-的
  if(Item.style.display=="none")
  {
    Item.style.display="";
    span.innerHTML=span.innerHTML.replace(reg,"<b>-</b>");
  }
else
{
    Item.style.display="none";
    span.innerHTML=span.innerHTML.replace(reg,"<b>+</b>");
  }
}
function VToText(v)
{
  var reg=/ /gi
  v=v.replace(reg,"");
  document.getElementById("txt").value=v;
  document.getElementById("Menu").style.display="none";
}
</script>

谢谢了。揭贴..
初步修改完成。
有空帮我看看能不能再改善了.
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=gb2312" />
    <title>Div-->Select</title>
<style>
.d1{
border:1px solid #999999;
display:block;
float:left;
background:#ffe;
font-size:12px;
padding:1px 3px 0  0;
cursor: hand;
}
.d1 b{
color:#FF0000;
padding:0 2px;
}
.s1{ color:#000099}
.s2{color:#336666;
font-weight:bold;
}
</style>

  </head>
  <body>
  <table width="100%" border="0" cellspacing="1" cellpadding="1">
    <tr>
      <td width="66%"> </td>
      <td width="34%"><input name="text" type="text" id="txt" style="height:20px" onFocus="ShowMenu()"/></td>
    </tr>
    <tr>
      <td colspan="2"><input name="text" type="text" id="txt2" style="height:20px" onFocus="ShowMenu()"/></td>
    </tr>
  </table>
  </body>
</html>
<script>
document.write("<div id=Menu style='position:absolute;display:none;z-index:9998;'>正在加载数据......</div>");
function ChooseTxt() //初始化日历的设置
{
    this.regInfo    = "扩展select的选择框。";
    this.eventSrc   = null;
    this.idSrc      = getObjectById("Menu");
this.xml        ="menu.xml";  //定义日历展示用的数组
}   var ChooseTxt = new ChooseTxt();
function ShowMenu()
{
  ChooseTxt.eventSrc=window.event.srcElement;
  CallDiv("Menu");
  ChooseTxt.idSrc.style.display="";
}
var doc,data=document.createDocumentFragment(null);
window.onload=function()
{
  if(document.implementation&&document.implementation.createDocument)
  {
    doc=document.implementation.createDocument('','',null);
    doc.onload=handler;
    doc.load(ChooseTxt.xml);
  }
  else if(window.ActiveXObject)
  {
    doc=new ActiveXObject("Microsoft.XMLDOM");
    doc.onreadystatechange=function(){if(doc.readyState==4)handler();}
    doc.load(ChooseTxt.xml);
  }
  else alert("XML创建出错！");
}
function handler()
{
  var Id=0;
  var Menu=ChooseTxt.idSrc;
  var root=doc.getElementsByTagName("root")[0];
  /*var span=document.createElement("span");
  span.innerHTML="<b>+</b>"+root.getAttribute("Text");
  span.id=Id;
  span.onclick=function()
  {
    ShowSubMenu(this,this.id);
  }
  data.appendChild(span);*/
  var item=root.getElementsByTagName("Item1");
  var div=document.createElement("div");
  div.id="div"+Id;
  div.style.display="inline";
  div.className="d1";
  if(item.length>0)
  {
    seekNodes(item,Id,div);
  }
  else
  {
    div.innerHTML="==没有数据==";
  }
  data.appendChild(div);
  data.appendChild(document.createElement("br"));
  Menu.innerHTML="";
  Menu.appendChild(data);
}
//编历函数
function seekNodes(Nodes,Id,p)
{
  var space="",lev=0;
  var reg=/Item(\d+)/;//正则,用来取层数的
  var ms=Nodes[0].tagName.match(reg);
  lev=parseInt(ms[1],10);
  for(var j=1;j<lev;j++)
     space+=" ";
  for(var i=0;i<Nodes.length;i++)
  {
     var item=Nodes[i].getElementsByTagName("Item"+(lev+1));//下一层的节点
     if(item.length==0)//叶子节点
     {
        var span=document.createElement("span");
        span.innerHTML=space+"<b> </b>"+Nodes[i].getAttribute("Text");
        span.className="s1"
        span.onclick=function()
        {
          VToText(this.innerHTML,ChooseTxt.eventSrc.id);
        }
        span.onmouseover=function()
        {
          this.style.backgroundColor="#ddd";
          this.style.color="red";
        }
        span.onmouseout=function()
        {
          this.style.backgroundColor="";
          this.style.color="";
        }
        p.appendChild(span);
        p.appendChild(document.createElement("br"));
     }
     else
     {
       Id++;
       var pspan=document.createElement("span");
       pspan.innerHTML=space+"<b>+</b>"+Nodes[i].getAttribute("Text");
       pspan.id=Id;
   pspan.className="s2"
       pspan.ondblclick=function()
       {
       VToText(this.innerHTML,ChooseTxt.eventSrc.id);
       }
       pspan.onmouseover=function()
        {
          this.style.backgroundColor="#ddd";
          this.style.color="red";
        }
       pspan.onmouseout=function()
        {
          this.style.backgroundColor="";
          this.style.color="";
        }
   pspan.onclick=function()
       {
         ShowSubMenu(this,this.id);
       }
       p.appendChild(pspan);
       p.appendChild(document.createElement("br"));
       var pdiv=document.createElement("div");
       pdiv.id="div"+Id;
       pdiv.style.display="none";
       p.appendChild(pdiv);
       seekNodes(item,Id,pdiv);  //继续遍历
     }
  }
  return data;
}
function ShowSubMenu(span,Id)
{
  var Item=document.getElementById("div"+Id);
  var reg=/<b>\+?\-?<\/b>/gi;//正则表达式,要来替换+/-的
  if(Item.style.display=="none")
  {
    Item.style.display="";
    span.innerHTML=span.innerHTML.replace(reg,"<b>-</b>");
  }
else
{
    Item.style.display="none";
    span.innerHTML=span.innerHTML.replace(reg,"<b>+</b>");
  }
}
function VToText(v,id)
{
  var reg=/ /gi;
  v=v.replace(reg,"");
  v=v.replace(/<b>\+?\-?<\/b>/gi,"");
  v=v.replace(/<b> <\/b>/gi,"");

  getObjectById(id).value=v;
  ChooseTxt.idSrc.style.display="none";
}
function CallDiv(id){
    var calendar=getObjectById(id);
    var e = window.event.srcElement;
    var o = calendar.style;
    var cw = calendar.clientWidth, ch = calendar.clientHeight;
    var dw = document.body.clientWidth, dl = document.body.scrollLeft, dt = document.body.scrollTop;
    var t = e.offsetTop,  h = e.clientHeight, l = e.offsetLeft, p = e.type;
    while (e = e.offsetParent){t += e.offsetTop; l += e.offsetLeft;}
    if (document.body.clientHeight + dt - t - h >= ch) o.top = (p=="image")? t + h : t + h + 6;
    else o.top  = (t - dt < ch) ? ((p=="image")? t + h : t + h + 6) : t - ch;
    if (dw + dl - l >= cw) o.left = l; else o.left = (dw >= cw) ? dw - cw + dl : dl;
}
function getObjectById(id){ if(document.all) return(eval("document.all."+ id)); return(eval(id)); }
function document.ondblclick()
{
if(ChooseTxt.eventSrc != window.event.srcElement) ChooseTxt.idSrc.style.display="none";
}
</script>
<?xml version="1.0" encoding="gb2312"?>
<root Text="状态">
    <Item1 Text="表情">
        <Item2 Text="热血" Value="0"></Item2>
        <Item2 Text="弱气" Value="1"></Item2>
        <Item2 Text="激情" Value="2"></Item2>
        <Item2 Text="冷静" Value="3"></Item2>
        <Item2 Text="冷酷" Value="4"></Item2>
    </Item1>
    <Item1 Text="装备">
    </Item1>
    <Item1 Text="特性">
        <Item2 Text="平均型" Value="0"></Item2>
        <Item2 Text="重视攻击" Value="1"></Item2>
        <Item2 Text="重视敏捷" Value="2"></Item2>
        <Item2 Text="重视防御" Value="3"></Item2>
        <Item2 Text="重视命中" Value="4">
          <Item3 Text="Menu3">
            <Item4 Text="Menu4">
    <Item5 Text="Menu3">
                    <Item6 Text="Menu4"></Item6>
                    </Item5>
</Item4>
          </Item3>
        </Item2>
    </Item1>
</root>

调试易

100 分求文本框录入的控件

解决方案 »

100 分 求文本框录入的控件

解决方案 »

100 分求文本框录入的控件