手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

很妖的实现:以JSon来实现TextBox可选择可输入

首页 > Javascript >

这个实现方式有点妖。
原文是用asp.net实现的。我也没有改,因为,json数据的获取在PHP中真是太简单了。拿到数据后json_encode一下就全有了。。

想看的就做个参考吧。我还是觉得妖
     这里只是把主要的代码贴出来,不再进行过多的说明,重要的地方以注释的方式进行说明。

XML/HTML代码
  1.     <div id="pubDiv" style="background-position: #9999FF; font-size:12px; display:none; z-index:0; overflow:auto; position:absolute; border:#EDEDED 0px solid;background:#EDEDED;"></div>  
  2.     <script type="text/javascript" language="javascript">  
  3.       // 注意下面的等号右面,不能是“<%=BuildJson() %>”,因为JSon整体不能是字符串,同时最后也不能加分号:“;”  
  4.         var strJson = <%=BuildJson() %>  
  5.          
  6.         function ShowBdzDiv() {  
  7.             var dept = document.getElementById("<%=ddlDeptEdit.ClientID %>").value;  
  8.             // 构建要下拉选择的内容  
  9.             var strHtml = "<table border=0px cellpadding=0  cellspacing=0 width=120px><tr>";  
  10.             for (var key in strJson[dept]) {  
  11.                 strHtml += "<tr><td onclick=SetBdz()>" + key + "</td></tr>";  
  12.             }  
  13.             strHtml += "</table>";  
  14.             var oBdz = document.getElementById("<%=txtBdz.ClientID %>");  
  15.             var oDiv = document.getElementById("pubDiv");  
  16.             oDiv.innerHTML = strHtml;  
  17.   
  18.             // 设置显示的位置,并显示  
  19.             oDiv.style.top = "99px";  
  20.             oDiv.style.left = "100px";  
  21.             oDiv.style.display = "block";  
  22.   
  23.         }  
  24.         // 当点击选择一个内容时  
  25.         function SetBdz() {  
  26.             var oBdz = document.getElementById("<%=txtBdz.ClientID %>");  
  27.             // 把选择内容设置到TextBox上,并隐藏下拉选择项  
  28.             oBdz.value = event.srcElement.innerText;  
  29.             HiddenDiv();  
  30.         }  
  31.         // 隐藏下拉选择项  
  32.         function HiddenDiv() {  
  33.             var oDiv = document.getElementById("pubDiv");  
  34.             oDiv.style.display = "none";  
  35.         }  
  36.     </script>  
  37. 。。。  
  38. <!--这里只有一点要注意:设置AutoCompleteType="Disabled"-->  
  39. <asp:TextBox ID="txtBdz" AutoCompleteType="Disabled" onfocus="ShowBdzDiv()" runat="server"></asp:TextBox>  

 

这里要说明的是,这里只实现了下拉选择项的点击选择,不能使用键盘操作。




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

Tags: json

« 上一篇 | 下一篇 »

只显示10条记录相关文章

javascipt的{}中逗号带来的困扰 (浏览: 29554, 评论: 6)
golang的json处理 (浏览: 23566, 评论: 0)
笔记:json_encode和jquery等 (浏览: 20584, 评论: 0)
苹果推送注意事项 (浏览: 19799, 评论: 0)
go语言的json (浏览: 19577, 评论: 0)
推送通知消息负载内容和本地格式字符串 (浏览: 18586, 评论: 0)
来自雪候鸟的关于JSON一些提示 (浏览: 16981, 评论: 1)
flutter 获取API数据时,中文乱码 (浏览: 3814, 评论: 0)

发表评论

评论内容 (必填):