能编辑的 html 选择框 select

转载 2011年01月25日 10:37:00

<textarea cols="50" rows="15" name="code" class="xhtml">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; New Document &lt;/title&gt; &lt;meta name="Generator" content="EditPlus"&gt; &lt;meta name="Author" content=""&gt; &lt;meta name="Keywords" content=""&gt; &lt;meta name="Description" content=""&gt; &lt;/head&gt; &lt;body&gt; &lt;input class="Snput" Data="1 test,2 test,3 test,4 test" name="input1111.uuuuu" &gt; &lt;input name="input2222.kkkkk" &gt; &lt;mce:script language="JavaScript"&gt;&lt;!-- window.onload = function(){ var _objs=document.getElementsByTagName("input"); for (i=0;i&lt;_objs.length ;i++ ){ if (_objs[i].className=="Snput"&amp;&amp;_objs[i].name!=""){ _objs[i].id=_objs[i].name; if(_objs[i].addEventListener){ _objs[i].addEventListener("focus",onfocusFn,false); }else{ _objs[i].attachEvent("onfocus",function(){onfocusFn(event.srcElement.id);}); _objs[i].attachEvent("onblur",function(){onblurFn(event.srcElement.id);}); } if(!document.getElementById("Snput"+_objs[i].id)){ var varTempNode=document.createElement("select"); varTempNode.id="Snput"+_objs[i].id; varTempNode.style.position="absolute"; varTempNode.style.display="none"; varTempNode.multiple=true; varTempNode.style.top=_objs[i].offsetTop+_objs[i].offsetHeight+1; varTempNode.style.left=_objs[i].offsetLeft; varTempNode.style.width=_objs[i].offsetWidth; if(varTempNode.addEventListener){ varTempNode.addEventListener("focus",onfocusFn,false); }else{ varTempNode.attachEvent("onfocus",function(){onfocusFn(event.srcElement.id);}); varTempNode.attachEvent("onblur",function(){onblurFn(event.srcElement.id);}); varTempNode.attachEvent("onchange",function(){onchangeFn(event.srcElement.id);}); } if (_objs[i].Data){ for (j=0;j&lt;_objs[i].Data.split(",").length ;j++ ){ varTempNode.options[j] = new Option(_objs[i].Data.split(",")[j]); } document.body.appendChild(varTempNode); varTempNode=null; } } if(!document.getElementById("InputSnput"+_objs[i].id)){ var varTempNodeInput=document.createElement("input"); varTempNodeInput.style.display="none"; varTempNodeInput.id="InputSnput"+_objs[i].id; document.body.appendChild(varTempNodeInput); varTempNodeInput=null; } } } } function onfocusFn(id){ var obj=document.getElementById(id); if (obj.id.substring(0,5)!="Snput"){ obj=document.getElementById("Snput"+id); } if (obj){ obj.style.display=""; } } function onblurFn(id){ if (id.substring(0,5)!="Snput"){ var obj=document.getElementById(id); var obj2=document.getElementById("Snput"+id); }else{ var obj=document.getElementById(id.substring(5,id.length)); var obj2=document.getElementById(id); } if (document.activeElement.id!=obj.id&amp;&amp;document.activeElement.id!=obj2.id){ obj2.style.display="none"; } } function onchangeFn(id){ if (id.substring(0,5)!="Snput"){ var obj=document.getElementById(id); var obj2=document.getElementById("Snput"+id); var obj3=document.getElementById("InputSnput"+id); }else{ var obj3=document.getElementById("InputSnput"+id.substring(5,id.length)); var obj=document.getElementById(id.substring(5,id.length)); var obj2=document.getElementById(id); } obj3.value=obj2.value; obj.value=obj2.options[obj2.selectedIndex].text; obj2.style.display='none'; } // --&gt;&lt;/mce:script&gt; &lt;/body&gt; &lt;/html&gt; </textarea>

 

select列表左右选择框

效果图 HTML布局 下拉框双向选择
  • qq_17254307
  • qq_17254307
  • 2016年12月22日 15:07
  • 1114

html select下拉框上显示空的实现方法

在之前的博文中, 我们讨论了可编辑的html下拉框的间接实现, 在本文中, 我们来看看如果将html的下拉框显示为空白。         先看代码: 1 2 ...
  • stpeace
  • stpeace
  • 2016年03月06日 22:23
  • 9442

html实现可输入下拉框

可输入的下拉框                                 请选择    csdn       123      ">write.blog.csd...
  • sdpdww
  • sdpdww
  • 2016年08月23日 14:18
  • 1310

利用html迂回实现可编辑的下拉框(select)

借鉴了一下网上思路, 写个了代码, 经测试, OK,   如下: 1 2 3 ...
  • stpeace
  • stpeace
  • 2016年03月05日 00:05
  • 4211

HTML中下拉框的简单介绍<Select><option>

下拉框在生活中应用很广
  • yangxin_blog
  • yangxin_blog
  • 2015年10月23日 22:42
  • 19025

input触发弹出层,实现select 效果

在Html中,标签标示一个文本输入框,没有结束标签。标签就是弹出下拉框,两个标签是相互独立的,如果把两者结合在一起,那可能会成为一个新的亮点,增加用户体验。其实已经有很多比较成熟的效果,比如googl...
  • cherishme1988
  • cherishme1988
  • 2015年01月15日 14:38
  • 19792

html之左右选择框使用总结

下面是左右选择框示例代码:sortitems = 1;  // Automatically sort items within lists? (1 or 0)function move(fbox,tb...
  • xiaolang85
  • xiaolang85
  • 2008年06月10日 20:09
  • 3555

给HTML下拉框选项添加背景色

红色
  • wangjian5748
  • wangjian5748
  • 2011年12月11日 19:15
  • 9680

select选择框变得可以输入、编辑

个件盒箱双条瓶罐
  • jeefchen
  • jeefchen
  • 2010年09月18日 16:58
  • 10679

html选择框多级联动

Demo来源:http://www.imuum.com/plugin-jquery-cityselect-js-provinces-linkage-effect.html 我把Demo改写成最多可以到...
  • liufang1991
  • liufang1991
  • 2016年08月17日 19:46
  • 3546
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:能编辑的 html 选择框 select
举报原因:
原因补充:

(最多只允许输入30个字)