用javascript做自动隐藏的下拉框，要求比较复杂，请大家帮忙看看,该如何处理
日期：2014-05-16 浏览次数：20357 次
用javascript做自动隐藏的下拉框，要求比较复杂，请大家帮忙看看
各位朋友：
我需要做一个可以隐藏的下拉列表菜单，网页中的布局是：
文本输入框（显示菜单的汉字） 下三角形的图片
列表菜单
还有一个隐藏域，准备接受选项的值，提交给下一个页面。
我只看得懂很简单的js代码，目前要实现一个如下功能的下拉框菜单：
1、列表菜单是隐藏的，当点击下三角形图片的时候，出现，再点击一次，隐藏，失去焦点隐藏列表；
2、可以在文本输入框中输入汉字，当文本输入框获得焦点后，显示列表菜单；如果失去焦点，下拉列表菜单隐藏；
3、菜单列表中的值和选项汉字，均由一个结果集（JSP，已经进行了排序）对其赋值，排序规则是第一个汉字。实时的监视文本输入框的输入，如果输入一个汉字，则菜单自动定位到以这个汉字开头的那些选项，如果可以的话，隐藏其它选项；
4、点击一个选项后，根据该选项的值，在文本框中显示汉字，并且把对应的value赋值给隐藏域，方便后面的表单提交操作。
不知道描述清楚了没有？请大家帮忙看看，如果可以的话，给一些代码我学习下。不要说Ajax啊，JS都还不会呢！！汗……
------解决方案--------------------
难倒是不难，但是想写出来也需要点时间啊，何况 现在网上有很多相同的代码，所以没谁愿意再写。
------解决方案--------------------
以前有人分享过一个，好像是叫“JK”。俺收藏了，竟然找不到原帖了。拿别人的东西出来蹭点分。
<!--Part code come from :http://us.f901.mail.yahoo.com/ym/Compose?YY=123456-->
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> Editable listbox </title>
<style>
/* Common elements */
body{font:small/1.2em arial,helvetica,clean,sans-serif;font:x-small;}
table{font-size:inherit;font:x-small;}
/* Options Templates */
.ac_menu{border:1px solid #3162A6;background-color:#F6F6F6;cursor:default;overflow:hidden;-moz-box-sizing:border-box;
height:expression((this.scrollHeight> 210)? "210px ": "auto ")}
.ac_menuitem{width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
.ac_menuitem_selected{background-color:#D6DEEC;width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
/* JK */
.minHeightTextarea{
height:expression((this.scrollHeight> 150)? "150px ":(this.scrollHeight+5)+ "px ");
overflow : auto;
}
</style>
<script language=javascript>
var tofieldListArray=[ "a@b.c ", "深圳市科技园 ", "深圳市罗湖东门 ", "深圳市罗\ "湖东门 ", "深圳市罗 '湖东门 ", "1000 ", "1001 ", "1002 ", "1003 ", "1004 ", "1005 ", "1006 ", "1007 ", "1008 ", "1009 ",
"1010 ", "1011 ", "1012 ", "1013 ", "1014 ", "1015 ", "1016 ", "1017 ", "1018 ", "1019 ",
"1020 ", "1021 ", "1022 ", "1023 ", "1024 ", "1025 ", "1026 ", "1027 ", "1028 ", "1029 ",
"1030 ", "1031 ", "1032 ", "1033 ", "1034 ", "1035 ", "1036 ", "1037 ", "1038 ", "1039 ",
"1040 ", "1041 ", "1042 ", "1043 ", "1044 ", "1045 ", "1046 ", "1047 ", "1048 ", "1049 "
];
var ccfieldListArray=tofieldListArray;
</script>
------解决方案--------------------
1
"一直在学slowhand(早起的鸟儿有虫吃，那么早起的虫子呢？) 发的代码 "
----------
请忽略slowhand所贴的代码，
已有更新版的，支持IE/FF,添加了几个小功能。
有需要请发邮件给: JK_10000@yahoo.com.cn
2
“再有就是选中一个菜单选项
各位朋友：
我需要做一个可以隐藏的下拉列表菜单，网页中的布局是：
文本输入框（显示菜单的汉字） 下三角形的图片
列表菜单
还有一个隐藏域，准备接受选项的值，提交给下一个页面。
我只看得懂很简单的js代码，目前要实现一个如下功能的下拉框菜单：
1、列表菜单是隐藏的，当点击下三角形图片的时候，出现，再点击一次，隐藏，失去焦点隐藏列表；
2、可以在文本输入框中输入汉字，当文本输入框获得焦点后，显示列表菜单；如果失去焦点，下拉列表菜单隐藏；
3、菜单列表中的值和选项汉字，均由一个结果集（JSP，已经进行了排序）对其赋值，排序规则是第一个汉字。实时的监视文本输入框的输入，如果输入一个汉字，则菜单自动定位到以这个汉字开头的那些选项，如果可以的话，隐藏其它选项；
4、点击一个选项后，根据该选项的值，在文本框中显示汉字，并且把对应的value赋值给隐藏域，方便后面的表单提交操作。
不知道描述清楚了没有？请大家帮忙看看，如果可以的话，给一些代码我学习下。不要说Ajax啊，JS都还不会呢！！汗……
------解决方案--------------------
难倒是不难，但是想写出来也需要点时间啊，何况 现在网上有很多相同的代码，所以没谁愿意再写。
------解决方案--------------------
以前有人分享过一个，好像是叫“JK”。俺收藏了，竟然找不到原帖了。拿别人的东西出来蹭点分。
<!--Part code come from :http://us.f901.mail.yahoo.com/ym/Compose?YY=123456-->
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> Editable listbox </title>
<style>
/* Common elements */
body{font:small/1.2em arial,helvetica,clean,sans-serif;font:x-small;}
table{font-size:inherit;font:x-small;}
/* Options Templates */
.ac_menu{border:1px solid #3162A6;background-color:#F6F6F6;cursor:default;overflow:hidden;-moz-box-sizing:border-box;
height:expression((this.scrollHeight> 210)? "210px ": "auto ")}
.ac_menuitem{width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
.ac_menuitem_selected{background-color:#D6DEEC;width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
/* JK */
.minHeightTextarea{
height:expression((this.scrollHeight> 150)? "150px ":(this.scrollHeight+5)+ "px ");
overflow : auto;
}
</style>
<script language=javascript>
var tofieldListArray=[ "a@b.c ", "深圳市科技园 ", "深圳市罗湖东门 ", "深圳市罗\ "湖东门 ", "深圳市罗 '湖东门 ", "1000 ", "1001 ", "1002 ", "1003 ", "1004 ", "1005 ", "1006 ", "1007 ", "1008 ", "1009 ",
"1010 ", "1011 ", "1012 ", "1013 ", "1014 ", "1015 ", "1016 ", "1017 ", "1018 ", "1019 ",
"1020 ", "1021 ", "1022 ", "1023 ", "1024 ", "1025 ", "1026 ", "1027 ", "1028 ", "1029 ",
"1030 ", "1031 ", "1032 ", "1033 ", "1034 ", "1035 ", "1036 ", "1037 ", "1038 ", "1039 ",
"1040 ", "1041 ", "1042 ", "1043 ", "1044 ", "1045 ", "1046 ", "1047 ", "1048 ", "1049 "
];
var ccfieldListArray=tofieldListArray;
</script>
------解决方案--------------------
1
"一直在学slowhand(早起的鸟儿有虫吃，那么早起的虫子呢？) 发的代码 "
----------
请忽略slowhand所贴的代码，
已有更新版的，支持IE/FF,添加了几个小功能。
有需要请发邮件给: JK_10000@yahoo.com.cn
2
“再有就是选中一个菜单选项
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
