如何固定下拉框的行数

huping88 2008-10-14 09:55:45
各位同仁，早上好，我现在想实现这样的一个功能，下拉框的初始状态为1，当我点击下拉箭头时，只需出现5个数据项，其他6项需要拖动滚动条才能看到。切忌：我不是需要
<select name="select" size="5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>，这样的效果，因为这个初始状态便是5了。
我也尝试用div层做了，但其实现效果跟下面的代码有点相似，还是会出现下拉框的所有数据项，然后才隐藏的。
这个代码如下，其是通过下拉框转成列表框了，如果看不到下拉框的所有数据就好了，代码如下：
<script language='javascript'>
function aaa()
{
var obj = document.getElementById("select");
obj.size=3;
obj.onclick = function(e)
{
obj.size=1;
obj.onclick = aaa;
}
}
</script>
<select id='fruit' name="select" onclick="aaa();">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
我通过很多方法，都不能实现我想要的效果，实在没有办法只有请教网上的高手们了，请高手们帮帮忙，不胜感激哦！！！
...全文
490 52 打赏 收藏 转发到动态 举报
写回复
用AI写文章
52 条回复
切换为时间正序
请发表友善的回复…
发表回复
x_l_xue 2011-07-12
  • 打赏
  • 举报
 回复
看的晚了点，不过很受益，感谢了
wangdao0829 2011-07-04
  • 打赏
  • 举报
 回复
同樣的問題求教了
程序猿之殇 2008-10-16
  • 打赏
  • 举报
 回复
在IE6模拟器上，你哪个没有选项的select下拉框下拉的过程还是存的，仔细看的话就知道了．
并且下拉以后，点击下拉框，也会看到下拉的过程．
hyying115 2008-10-16
  • 打赏
  • 举报
 回复
<select id="select2" name="filter_id_ <?=$i?>" size="5" style="display:none;z-index:2; position:absolute;" onChange="c(this)" onBlur="this.style.display='none'" onchange="javascript:mv(' <?=$i?>')">
首先你这样写onchange事件只会执行c，一个标签里不能写两个onchange
如果要执行两个函数可以这样写 onChange="c(this);mv('<?=i?>')"
也可以在c函数的最后调用mv
上面的方案是先调用c 如果要先调用mv 凋个位子就行了。。
huping88 2008-10-16
  • 打赏
  • 举报
 回复
我们公司这点破工资，在我生病的时候还给我这么多任务，真是有点可恶
huping88 2008-10-16
  • 打赏
  • 举报
 回复
简单的话，大哥，请你帮忙下啊，先谢谢了
huping88 2008-10-16
  • 打赏
  • 举报
 回复
是啊，我最近变笨了，一思考头就大，烦呐，工作没有完成还经常对着电脑发呆，真累
一把编程的菜刀 2008-10-16
  • 打赏
  • 举报
 回复
还是讨论那个问题啊？

虽然简单，但是解决了就好了
一把编程的菜刀 2008-10-16
  • 打赏
  • 举报
 回复
呵呵
huping88 2008-10-16
  • 打赏
  • 举报
 回复
35楼的高手，再请问下function f(sel1)
{
var sel2=document.getElementById('select2');
var i=sel2.selectedIndex>0 ?sel2.selectedIndex :0;
var name =sel2.options[i].innerHTML;
var tmp=new Option(name,sel2.value);
sel1.options[0]=tmp;
sel2.style.display='inline';
sel1.style.width=sel2.offsetWidth;
sel2.focus();
}
function c(sel2)
{
var sel1=document.getElementById('select1');
var i=sel2.selectedIndex>0 ?sel2.selectedIndex :0;
var name =sel2.options[i].innerHTML;
var temp=new Option(name,sel2.value);
sel1.options[0]=temp;
sel2.style.display="none";

}


function mv(serial_no) //移位
{
var i=document.frmCmd.elements["filter_id_"+serial_no].selectedIndex;
var m=document.frmCmd.elements["filter_id_"+serial_no].options[i].value;

//alert(m); //测试 m 值
//exit;
document.frmCmd.realAction.value = "mv";
document.frmCmd.id.value = serial_no; //旧id
document.frmCmd.new_id.value = m; //新id
document.frmCmd.submit();
}



以下是html部分
<td width="6%" bgcolor="#FFFFFF">
<select id="select1" onFocus="f(this)">
<?php
$filter = &$config['filter']['rule'];
for($j=0; $j< count($filter); $j++)
{
echo '<option value="'.$j== $i.'"';
// if ($j == $i) echo " selected";
echo '> '.$j== $i.' </option>';

}
?>
</select> <br>
<select id="select2" name="filter_id_<?=$i?>" size="5" style="display:none;z-index:2; position:absolute;" onChange="c(this)" onBlur="this.style.display='none'" onchange="javascript:mv('<?=$i?>')">
<?php
$filter = &$config['filter']['rule'];
for($j=0; $j< count($filter); $j++)
{
echo '<option value="'.$j.'"';
if ($j == $i) echo " selected";
echo '> '.$j.' </option>';
//$filter_id = $filter[$i]['rule'];
//echo $filter_id;
}
?>
</select>
<!--
<select name="filter_id_<?=$i?>" onchange="javascript:mv('<?=$i?>')">
<?php
$filter = &$config['filter']['rule'];
for($j=0; $j< count($filter); $j++)
{
echo '<option value="'.$j.'"';
if ($j == $i) echo " selected";
echo '> '.$j.' </option>';
//$filter_id = $filter[$i]['rule'];
//echo $filter_id;
}
?>
</select>
-->

</td>


把mv和c函数写在一起，然后下面onchange再调用mv和c，代码怎么合成啊？合成之后我应该就能实现我的规则移动了吧？
35楼的高手，如果有时间的话，请帮忙帮到底吧，呵呵，非常感谢！！！
最近2天还要研究php代码编译，这周没有时间了，看你技术很高，所以暂时有点依赖的心里了，呵呵
huping88 2008-10-16
  • 打赏
  • 举报
 回复
已经实现，非常感谢35楼的朋友，感觉你编程挺棒的，如果物理距离近的话，真想拜你为师了
我工作也快1年了，这1年中虽然也学到了不少东东，可是感觉自己进步不大，我有个师兄，他工作近2年，他现在都已经是java方面的高手了。
由于我以前数学不是很理想，又因为自己是女生，我真怀疑，我是否不适合做研发的工作，哎，有时候觉得真是累啊……
huping88 2008-10-16
  • 打赏
  • 举报
 回复
女生？那我更要学习了，向你学习了，我想结贴，可是好像还不会哦
hyying115 2008-10-16
  • 打赏
  • 举报
 回复
[Quote=引用 47 楼 jakey9826 的回复:]
引用 46 楼 huping88 的回复:
也非常的感谢44楼的朋友这么的关心我这个下拉框的问题哦

学习而矣，我是关注谁能更好的解决问题，不过也该结贴了．
[/Quote]
对 共同学习
顺便 悄悄的对楼主说一句：偶是女生。。。。
huping88 2008-10-16
  • 打赏
  • 举报
 回复
是啊，我现在结贴了，呵呵，非常感谢网上的朋友，尤其是43楼的那位朋友，谢谢！
程序猿之殇 2008-10-16
  • 打赏
  • 举报
 回复
[Quote=引用 46 楼 huping88 的回复:]
也非常的感谢44楼的朋友这么的关心我这个下拉框的问题哦
[/Quote]
学习而矣，我是关注谁能更好的解决问题，不过也该结贴了．
huping88 2008-10-16
  • 打赏
  • 举报
 回复
也非常的感谢44楼的朋友这么的关心我这个下拉框的问题哦
huping88 2008-10-16
  • 打赏
  • 举报
 回复
我知道一个onchange事件是不可以调用两个函数的，最近头疼真的一点都不想思考。
其实要是有时间的话，我想用文本框的标签实现公司说需要的功能呢，但是现在怀孕了，最近老是头疼，也不想思考，就只有交差式的完成任务了，也考虑着辞职呢，但是听说现在工作难找，所以正在犹豫中……
hyying115 2008-10-15
  • 打赏
  • 举报
 回复
这次应该是你要的效果了吧，ie6 ie7 FF全部通过测试<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script>
function f(sel1)
{
var sel2=document.getElementById('select2');
var i=sel2.selectedIndex>0 ?sel2.selectedIndex :0;
var name =sel2.options[i].innerHTML;
var tmp=new Option(name,sel2.value);
sel1.options[0]=tmp;
sel2.style.display='inline';
sel1.style.width=sel2.offsetWidth;
sel2.focus();
}
function c(sel2)
{
var sel1=document.getElementById('select1');
var i=sel2.selectedIndex>0 ?sel2.selectedIndex :0;
var name =sel2.options[i].innerHTML;
var temp=new Option(name,sel2.value);
sel1.options[0]=temp;
sel2.style.display="none";

}
</script>
</head>
<body>
<select id="select1" onFocus="f(this)">
<option>dhh</option>
</select><br>
<select id="select2" name="select" size="5" style="display:none;" onChange="c(this)" onBlur="this.style.display='none'">
<option>dhh </option>
<option>bbb</option>
<option>3 </option>
<option>4 </option>
<option>5 </option>
<option>6 </option>
<option>7 </option>
<option>8 </option>
<option>9 </option>
<option>10 </option>
</select>
</body>
</html>
hyying115 2008-10-15
  • 打赏
  • 举报
 回复
测试OK
在select2的style中加上 z-index:2; position:absolute;这两个属性 试试看
hyying115 2008-10-15
  • 打赏
  • 举报
 回复
考虑浮动div 也许可以实现
加载更多回复（32）
vue+Element中table表格实现可编辑（select下拉框）
最近在工作中遇到一个问题，需要在表格中实现数据可编辑状态，具体情况是需要在单元格里加入下拉框；并且每个下拉框的数组数据是不一样的，具体是根据当前行前面数据的id查询而来，前面的是数据是动态生成的，后面的下拉框数据也是根据id动态生成的，内容不同；有点类似于树形二级状态，后面的下拉框数据来源并没有在前面内容里，而是另外一个接口查询，具体操作如下： HTML代码： 1.在处理人列加入一个下拉框模板，其中v-model必须要scope.row.proJbruserValue来绑定，意思是这个值绑定到当前行所选中的人；如果直接绑定proJbruserValue，将不能进行差异化选择，(这里scope
复选下拉框用于Gridview筛选
ASP.NET页面上我们显示数据表格一般用GridView控件，有时GridView数据行数很多，我想用一个类似Excel里的筛选功能来检索数据，文章可见地址
VBA_下拉复选框示例.xlsm
VBA复选下拉框，判断总共行数，循环判断复选框内容进行对比操作，生成JSON串。如有疑问，欢迎交流！
IOS自定义下拉列表
自定义下拉列表，很全面，有注释，可以选择滚动的行数
JS学习DOM 关联下拉列表，时钟，全选全不选，选中左移右移，实现创建自定义表格 弹出选项页面填入文本框
自己上课完整理的十分全面，注释一看就懂。功能很完备，比如选中A框左移到B框，不选中按下按钮会提示未选择选项。多选之后同样可以实现选中左移。 以下详细介绍每个练习： 1.汽车选中左，右移动，全部左，右移动练习：四个功能按钮，选中左移，右移，全部左移，右移。（不选中会提示未选中，多选也正常实现选中左右移动） 2.全选全不选的练习：四个功能按钮，全选全不选按钮(点一下全选，再点一下全不选)，全选按钮，全不选按钮，反选按钮 3.创建自定义表格（输入自定义行数和列数点击按钮即可生成表格） 4.时钟（显示当前动态时间） 5.关联下拉列表：选中第一个下拉列表国家，第二个下拉列表只显示对应国家的城市 6.点击按钮弹出带选项小页面，选中选项填入文本框
基础编程

21,886

社区成员

140,364

社区内容

发帖
与我相关
我的任务
社区描述
从PHP安装配置，PHP入门，PHP基础到PHP应用
社区管理员
  • 基础编程社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

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

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

+ 用AI写文章