实现能从下拉菜单里选择,也能手工输入,关键还要能选择下拉的多项,该如何实现?

cql0007 2003-10-15 12:16:29
要实现这样一个功能,不知有没办法实现:
在获得一个查询条件过程中,希望那些条件能够手工输入,也能够下拉选择(这个我已经有参照http://www.csdn.net/develop/article/21/21280.shtm大概实现了,效果不太好),另外一个,还希望能够一次选多个条件进行查询,就是那些下拉的选项能够支持按着Shit键之类的选择几项,不知该如何实现,有没办法实现了?
谢谢了!
...全文
179 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
cql0007 2003-10-17
  • 打赏
  • 举报
 回复
多谢各位老兄了,现在支持选择和输入的已经找到了几种代码了.但要支持多选的看来不好看办了.
我想干脆就弄个多行的select算了,那样就可以让客户选多个了.
可我自己都觉得这样做有点矛盾,如果这样在多行的select里面多选的话,那自己手工输入的都没意义了啊,而且一用多行的话,那种既手工输入又选择的效果都不知怎么弄了.

这个要求是我们老总提出来的,说一定要实现,各位老兄帮忙想想,有没有别的方法实现他的这个意思了?

(我想顶上一行放一个text,下面放一个多行的select,这样,客户他想输就输,不想输就选择,可这样硬是要多了一个组件了)
xishanlang2001 2003-10-16
  • 打赏
  • 举报
 回复
嗯,说下你的要求,偶看偶会不会改:)
iPanda 2003-10-16
  • 打赏
  • 举报
 回复
不错
blueice2002 2003-10-16
  • 打赏
  • 举报
 回复
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Author" content="阿信,fason">
<meta name="KeyWords" content="下拉框,输入,阿信,fason">
<title>漂亮下拉框</title>
<style>
.selectBox{border:1px solid #993300;height:20px;}
.editBox{border:0px;width:100px;cursor:default;width:100%;height:19px;padding-top:2px;margin:1px}
.dropdownbutton{font-size:12px;font-family:webdings;color:#CCFF66;height:20px;background-color:#993300;border:1px solid #993300;padding:0 2;margin:1px;cursor:default}
.selectContent{position:absolute;border:1px solid #993300;visibility:hidden;z-index:1000;background-color:#FFFFFF}
.selectContent tr{height:20px;cursor:default}
.selectContent td{font-size:12px;font-family:Vendana;padding:2 3}
.OnFocus{color:#FFFFFF;background-color:#993300}
</style>
<script language="javascript">
var CoolSelect=[]
var CurrentTR=null
function MouseOver(trObj){
if(!CurrentTR)CurrentTR=trObj
CurrentTR.className=""
trObj.className="OnFocus"
CurrentTR=trObj;
}

function ButtonOver(BtnObj){
BtnObj.style.backgroundColor='#cc3300'
}
function ButtonOut(BtnObj){
BtnObj.style.backgroundColor='#993300'
}
function MouseClick(Index,trObj){
with(GetObj(CoolSelect[Index][1])){
value=trObj.innerText;
style.backgroundColor='#993300'
style.color='#FFFFFF'
focus()
}
DropDown(Index)
}

function GoURL(trObj){
var url=trObj.getAttribute("url")
if(url&&url!="")window.open(url)
}

function BoxBlur(InputBox){
with(InputBox.style){backgroundColor="";color=''}
}

function DropDown(Index){
event.cancelBubble=true
ContainerReset(Index)
var show=GetObj(CoolSelect[Index][2]).style.visibility=='visible'
GetObj(CoolSelect[Index][2]).style.visibility=show?'hidden':'visible'
setPosition(Index)
}

function document::onclick(){
for(i=0;i<CoolSelect.length;i++){
GetObj(CoolSelect[i][2]).style.visibility='hidden'
with(GetObj(CoolSelect[i][2]))for(j=0;j<rows.length;j++)rows[j].style.display=""
}
}

function window::onresize(){
for(i=0;i<CoolSelect.length;i++)setPosition(i)
}

function showTip(Index){
var inputbox=GetObj(CoolSelect[Index][1])
var container=GetObj(CoolSelect[Index][2])
var num=0
container.style.visibility="visible"
for(i=0;i<container.rows.length;i++){
if(container.rows[i].cells[0].innerText.indexOf(inputbox.value)!=0)container.rows[i].style.display="none"
else {container.rows[i].style.display="";num++}
}
if(num==0)container.style.visibility='hidden'
}

function ContainerReset(Index){
var container=GetObj(CoolSelect[Index][2])
for(i=0;i<container.rows.length;i++)container.rows[i].style.display=""
if(CurrentTR)CurrentTR.className=""
}

function setPosition(Index){
var s=GetObj(CoolSelect[Index][0])
var container=GetObj(CoolSelect[Index][2])
var l=s.offsetLeft;
var t=s.offsetTop;
while(s=s.offsetParent){l+=s.offsetLeft;t+=s.offsetTop}
with(container.style){left=l+1;top=t+GetObj(CoolSelect[Index][0]).offsetHeight}
}

function Init(){
CoolSelect[0]=["ConTainer1","txt1","select1"]
CoolSelect[1]=["ConTainer2","txt2","select2"]
for(i=0;i<CoolSelect.length;i++){
var s=GetObj(CoolSelect[i][0])
var container=GetObj(CoolSelect[i][2])
container.style.width=s.offsetWidth>container.offsetWidth?s.offsetWidth:container.offsetWidth
setPosition(i)
}
}
function GetObj(id){return document.getElementById(id)}
</script>
</head>

<body onload="Init()">



<div align="center">
<table style="width:250;border:2px solid groove;font-size:12px" border=1 cellspacing=0 cellpadding=0>
<tr bgcolor="green" style="font-weight:bold;color:#FFFFFF">
<td>输入，提示功能示例</td><td>菜单跳转示例</td>
</tr>
<tr>
<td>
<table id="Container1" class="selectBox" border="0" width=100 cellspacing=0 cellpadding=0>
<tr>
<td><input name="txt1" value=" 请选择 " class="editBox" onblur="BoxBlur(this)" onclick="DropDown(0)" onkeyup="showTip(0)"></td>
<td width="1"><span class="dropdownbutton" onmouseover="ButtonOver(this)" onmouseout="ButtonOut(this)" onclick="DropDown(0)">6</span></td>
</tr>
</table>
</td>
<td>
<table id="Container2" class="selectBox" border="0" cellspacing=0 cellpadding=0>
<tr>
<td><input name="txt2" readOnly=true value=" 请选择 " class="editBox" onblur="BoxBlur(this)" onclick="DropDown(1)" onkeyup="showTip(1)"></td>
<td width="1"><span class="dropdownbutton" onmouseover="ButtonOver(this)" onmouseout="ButtonOut(this)" onclick="DropDown(1)">6</span></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<table id="select1" class="selectContent" cellspacing=0 cellpadding=0>
<tr onmouseover="MouseOver(this)" onclick="MouseClick(0,this)" title="作者:Andy">
<td>一起走过的日子</td>
</tr>
<tr onmouseover="MouseOver(this)" onclick="MouseClick(0,this)" title="作者:Andy">
<td>你是我的温柔</td>
</tr>
<tr onmouseover="MouseOver(this)" onclick="MouseClick(0,this)" title="作者:Andy">
<td>你是我的女人</td>
</tr>
</table>
<table id="select2" class="selectContent" cellspacing=0 cellpadding=0>
<tr onmouseover="MouseOver(this)" onclick="MouseClick(1,this);GoURL(this)" url="http://expert.csdn.net/expert/forum.asp">
<td>CSDN论坛</td>
</tr>
<tr onmouseover="MouseOver(this)" onclick="MouseClick(1,this);GoURL(this)" url="http://msdn.microsoft.com/library/">
<td>MSDN参考</td>
</tr>
<tr onmouseover="MouseOver(this)" onclick="MouseClick(1,this);GoURL(this)" url="http://www.iecn.net">
<td>IECN论坛</td>
</tr>
</table>
</body>
</html>
eliphe 2003-10-16
  • 打赏
  • 举报
 回复
同时选的话，用select怕是不行了。
不过你的要求这么多，建议不要用select,可以自己建立一个select,

方法:建一个layer,放一个text和一个select和一组checkbox,再根据你的需要设定某个组件的显示，即可.
lmqak 2003-10-15
  • 打赏
  • 举报
 回复
不可能！
longshenwang 2003-10-15
  • 打赏
  • 举报
 回复
关注。。
nolonely 2003-10-15
  • 打赏
  • 举报
 回复
<select multiple>
本来就是可以用shift来支持多选的
cql0007 2003-10-15
  • 打赏
  • 举报
 回复
xishanlang2001(西山狼2000) 老兄贴的代码确实是简洁,用起来感觉也还行,不过这都是用绝对坐标在定位的,这在实用过程中会有不少麻烦的吧
xishanlang2001 2003-10-15
  • 打赏
  • 举报
 回复
可输入的select flylyke（转贴）

关键字 select

出处 http://51js.1000box.net



做了一点小修改，希望对大家有用！！

<html>
<head>
<style>
<!--
.cls1 { position:absolute; left:250px; top:89px; width:216px; height:72px; z-index:1; }
.cls2 { position:absolute; left:250px; top:89px; width:95px; height:18px; z-index:2 }
input { font-size: 12px; padding-top: 2px; padding-left: 2px;width:127;}
//-->
</style>
</head>
<script>
<!--
function addOption(pos){

if(event.keyCode==13)
{
var select_obj = document.getElementById("myselect");
var text_value = document.getElementById("test").value;

if (select_obj.length)
{
for (var i=0;i<select_obj.length;i++)
{
// 如果已经存在，不添加，直接退出
if (select_obj.options[i].text==text_value)
alert("选项已存在，请重新输入");
}
}
var the_option= new Option(text_value,text_value);

select_obj.add(the_option);

select_obj.selectedIndex = select_obj.options.length-1
}

}
//-->
</script>
<div class="cls1" style="clip: rect(3 280 21 110)">
<select name="myselect" style="width:127" onchange="document.getElementById('test').value=this.value">
</select>
</div>
<div class="cls2">
<input type="text" name="test" onkeydown="addOption()" size="20" style="width: 127; height: 23">
</div>

</body>
</html>
hrong 2003-10-15
  • 打赏
  • 举报
 回复
现给你一个测试版: http://expert.csdn.net/Expert/TopicView1.asp?id=2143373
正式版还没有做完, 不过在IE6里这个测试版也可以用了.
cql0007 2003-10-15
  • 打赏
  • 举报
 回复
那各位老兄帮忙想想,我要实现的这种功能还有没有别的好的方法来实现了?
软件界面设计工具_3款合集
可以用命令行进行导出操作，这样就能让我写个脚本，从svn里checkout某个目录下的所有设计文件后，导出图片，打包后用邮件发到项目经理，工程师甚至客户那； 跨平台，Balsamiq Mokups是用Flex和Air实现的，所以在Mac...
人力资源管理软件（完全免费）
合同管理模块增加从员工资料导入合同信息的功能(右树菜单)（感谢Lucky Cat,我就是我） 员工福利体现分公司信息（感谢欢浪家园） 物品管理体现分公司信息（感谢我就是我） 人事合同增加时，同步员工档案（感谢Lucky ...
移动端可输入的下拉选择的两个简单案例
在pc端,如果既有下拉,也有可输入,有好多种实现方式,比如输入联想,eysui的combobox框. 不过,在做移动端时,由于经验原因,我并没有找到既能输入也可以选择的框架.因此,只能手动实现了. 第一种,这种原来只是单纯的下拉...
excel中通过下拉菜单显示不同的报表内容，类似下拉选项中，一旦切换内容，后面的表格内容全都不同？
我们要在A列输入姓名，B列输入性别，要求性别实现下拉选择，而不是全手工输入，具体完成品见下图 END 方法 先将表格框架大致建立好，将姓名全部输入到A列，B列性别列具体信息暂时不输入；再到E1列输入男，E2列输入女...
Excel多级下拉菜单的制作
有一类数据是相对固定的，比如说性别或者行政区划，如果数据量很大的话，每一项都手动输入就比较浪费时间而且容易出错，这时我们就可以给每组数据制作一个下拉菜单，以后我们只需从菜单里选择相应的内容即可。...
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章