<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="Andrew">Andrew</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">
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;width:"+(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-width:0;border-top-width:0;border-bottom-width:0;border-right:0px solid #000000;vertical-align:middle;height:18px;color:#000000}
.down{position:relative;left:-2px;font-size:11px;vertical-align:middle;width: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>
//简化
<input type="text" id="tbUnit" style="width:121px;position: absolute" />
<select onchange="document.getElementById('tbUnit').value=this.options[this.selectedIndex].text;" style="width:138px;clip: rect(auto auto auto 120px); position: absolute">
<option value="1"> 1</option>
<option value="个">个 </option>
<option value="件">件 </option>
<option value="条">条 </option>
</select>
分享到：
相关推荐
在压缩包子文件“editable xlk.php”中，"editable"可能指的是这个文件是关于可编辑功能的，而"xlk.php"可能是一个PHP脚本文件，用于处理与前端交互的数据，例如接收用户在可编辑下拉列表框中输入的信息，进行验证、...
"FlexBox"可能是源码的一部分，或者是一个示例，因为"FlexBox"是CSS3中的一个布局模型，常用于创建响应式和动态的布局，与可编辑下拉列表框的功能结合，可以实现更丰富的界面效果。 综上所述，这个源码提供了一种...
通过以上步骤，我们可以实现一个具有可编辑文本和双击弹出下拉列表功能的ListView。这种自定义控件提供了更丰富的交互体验，同时也增加了程序的灵活性和可定制性。在实际开发中，你可能还需要考虑一些其他因素，例如...
总结起来，`Winform`的`PropertyGrid`配合自定义的`UITypeEditor`可以实现属性编辑器的丰富功能，如本例所示的下拉列表框。通过这种方式，我们可以为用户提供更加直观和便捷的配置界面，提升应用的用户体验。在实际...
基于Javascript的可编辑下拉列表框的设计与实现.pdf
"C#可输入的下拉列表框"是一种交互式控件，它结合了传统的下拉列表功能和文本输入框的功能，允许用户既可以从中选择已有的选项，也可以自由输入新的值。这种控件在提高用户体验和数据输入灵活性方面起到了重要作用。...
要实现可编辑的ListView，我们需要自定义一个控件，继承自ListView，并添加编辑功能。这通常涉及到处理MouseClick或DoubleClick事件来启动编辑模式。当用户点击或双击某一行时，可以弹出一个TextBox或其他编辑控件，...
在实现可编辑级联下拉列表框时，JQuery可以用来绑定事件、获取和设置DOM元素的状态，以及创建动态的UI效果。例如，我们可以使用JQuery的`$(element).on('change', function() {...})`来监听下拉框的改变事件，然后在...
本篇将详细讲解如何在CListCtrl中添加编辑框、下拉列表框以及时间控件，以实现更丰富的用户交互界面。 首先，我们需要了解CListCtrl的基本操作。CListCtrl是MFC对Windows API中的ListView控件的封装，可以用来展示...
本教程将详细讲解如何使用LabVIEW实现下拉列表菜单及其功能。 首先，下拉列表控件在LabVIEW中的图标是一个小三角形，通常与一个文本框一起出现。当用户点击三角形时，会弹出一个菜单，展示所有可选的项目。这种控件...
首先，我们来看"可输入下拉列表框"的实现原理。传统的HTML下拉框`<select>`和`<option>`元素提供了一种受限的选择方式，用户只能从预设的选项中选择。而可输入下拉列表框则在此基础上增加了输入框的功能，通过监听...
三、实现可编辑下拉列表 为了创建可编辑的下拉列表，我们需要借助JavaScript来扩展这个功能。我们可以监听下拉列表的事件，如`change`或`input`，并在用户更改选项时更新列表内容。此外，我们还需要为用户提供一个...
本篇文章将详细讲解如何在DataGridView控件中实现下拉列表功能。 首先，你需要创建一个DataGridView控件并将其绑定到数据源。这可以是数据库、数组或其他数据集。例如，你可能使用以下代码创建和绑定控件： ```...
js+CSS 实现可以编辑的下拉列表框，适应多浏览器。引用方便快捷
首先，WPF的ComboBox是一个常用的控件，它结合了文本输入框和下拉列表的功能。用户可以输入文本，或者从下拉列表中选择一个预定义的选项。在默认情况下，ComboBox仅支持简单的文本项，但通过自定义控件和模板，我们...
表格控件是常见的一种用户界面元素，用于展示结构化的数据，而下拉列表框则为用户提供了一个简洁的交互方式，允许他们在预设的选项中进行选择。本案例主要探讨如何在表格控件中集成下拉列表框，提高用户体验。 首先...