下拉列表框只能选择,我想选择后还可以允许用户对选择的内容进行修改,如何实现可编辑的下拉列表框?

原创 2005年03月02日 10:07:00

下拉列表框只能选择,我想选择后还可以允许用户对选择的内容进行修改,如何实现可编辑的下拉列表框?

借花献佛:
<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;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>

iOS 简单实现下拉列表框

iOS 下拉列表 import “LianXIViewController.h”@interface LianXIViewController ()// 定义视图作为下拉列表框内容 @propert...
  • iOS_MingXing
  • iOS_MingXing
  • 2015年11月07日 20:30
  • 2272

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

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

VS2010 下 MFC下拉列表框的用法

最近在写一个串口程序,需要将下拉列表框的数据全部显示,怎么设置都不对,最后终于找到了设置方法: 二、如何控制Combo Box的下拉长度 1,首先要知道两点:一、那就是在设计界面里,点击一下C...
  • robinson_911
  • robinson_911
  • 2014年01月21日 16:51
  • 6205

MFC 学习之 下拉列表框

配置:VS2008 工程:Test1 步骤: 1、添加一个下拉列表框(Combo box),一个文本框(Edit control) 2、Combo box 上右键,添加事件处理程序,添加 On...
  • u010477528
  • u010477528
  • 2015年05月26日 21:15
  • 4659

下拉框与列表框

下拉列表框和下拉列表 下拉列表框和下拉列表 下拉列表框:请选择电话区号: 北京 西安 成都 ...
  • u013263923
  • u013263923
  • 2014年10月24日 17:30
  • 1396

Java程序设计(十五)----用户在对话框下拉列表中选择的为显示文本区中的文本

* 程序的版权和版本声明部分 * Copyright (c) 2012, 烟台大学计算机学院学生 * All rights reserved. * 作 者: 刘镇 * 完成日期: 2...
  • qdliuzhen
  • qdliuzhen
  • 2012年11月25日 11:12
  • 4558

jsp页面中的下拉列表

在WEB开发过程中,我们经常遇到信息修改的功能需求。这时我们给用户提供一个JSP页面,展示出当前的信息并允许用户重新设置新值。而在这个页面中,一般是少不了下拉列表的。至于它的处理方式,我以前想过一种,...
  • binbinxyz
  • binbinxyz
  • 2012年02月15日 09:46
  • 40159

iOS 创建下拉列表

通过网上资料,自己借助资料写的代码,这是完全代码 //****************************************************************...
  • nwcwyp
  • nwcwyp
  • 2013年11月25日 16:05
  • 6036

可选择也可输入的下拉列表框,html文件

TW之运行代码插件--Ayin增强版 div,span,p,td,font{font-size:9pt;} ---请选择--- 闲人书库 闲人B...
  • xinyuan_java
  • xinyuan_java
  • 2015年03月06日 11:20
  • 3018

根据下拉框选择变化显示不同内容

html>head>title>Untitled Documenttitle>meta http-equiv="Content-Type" content="text/html; charset=gb...
  • dc92j
  • dc92j
  • 2007年07月17日 09:19
  • 1475
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:下拉列表框只能选择,我想选择后还可以允许用户对选择的内容进行修改,如何实现可编辑的下拉列表框?
举报原因:
原因补充:

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