模仿combox(select)控件，不用为美化select烦恼了。

程序员文章站 2024-02-15 10:25:40

不用整天为美化select控件烦恼了。 1、可批量美化select控件。 2、可以有onchange句柄。 3、触发onchange的函数可带参数。 3、可以得到selec...

不用整天为美化select控件烦恼了。

1、可批量美化select控件。
2、可以有onchange句柄。
3、触发onchange的函数可带参数。
3、可以得到select的值。
4、可设置像select类似的滚动条（如大于或等于8个数目时出现滚动条）
5、可设置宽度和高度

api参考：
//首先生成一个simulateselect的实例
//构造函数的第一个可选参数为触发onchange的函数，其它的为onchange函数的参数；
c = new simulateselect(s1onchange, "never-online");
//设置select的css，第一个参数为控件的主要css、第二个为选中条目时的css、第三个为没有选中条目时的css
c.style("ctlselect2", "selected2", "unselected2");
//设置select的宽度和高度；
c.width = 320;
c.height = 20;
//初始化参数为：select控件的id，可以用逗号分离，进行批量转换；
c.init("s1,s2,s3");

下一版本将可修改combox

<p> 
normal select: <select id="s0"><option value="- please select your options -"> - please select your options - 
</option>
<option value="1">option1 
</option>
<option value="2">option2 
</option>
<option value="3">option3 
</option>
<option value="4">option4 
</option>
<option value="5">option5 
</option></select></p>

<p> 
simulate select: <select id="s1"><option value="- please select your options -"> - please select your options - 
</option>
<option value="1">1option1 
</option>
<option value="2">1option2 
</option>
<option value="3">1option3 
</option>
<option value="4">1option4 
</option>
<option value="5">1option5 
</option></select></p>

<p> 
scroll simulate select: <select id="s2"><option value="- please select your options -"> - please select your options - 
</option>
<option value="1">2option1 
</option>
<option value="2">2option2 
</option>
<option value="3">2option3 
</option>
<option value="4">2option4 
</option>
<option value="5">2option6 
</option>
<option value="5">2option7 
</option>
<option value="5">2option8 
</option>
<option value="5">2option9 
</option>
<option value="5">2option10 
</option>
<option value="5">2option11 
</option>
<option value="5">2option12 
</option>
<option value="5">2option13 
</option>
<option value="5">2option14 
</option></select></p>

<p> 
onchange handler fire: <select id="s3"><option value="- please select your options -"> - please select your options - 
</option>
<option value="1">3option1 
</option>
<option value="2">3option2 
</option>
<option value="3">3option3 
</option>
<option value="4">3option4 
</option>
<option value="5">3option5 
</option></select></p>

<button onclick="alert(a.getvalue('s1') + '\n\n' + b.getvalue('s2') + '\n\n' + c.getvalue('s3'))" class="ctlselect"> get value </button> 
<button onclick="alert('next version')" class="ctlselect">append item</button> 
<button onclick="alert('next version')" class="ctlselect">remove item</button>

<h4> description </h4> 
<pre class="brush: css;"> 
//------------------------------------------------------------- 
//  @ module: simulate select control, ie only. 
//  @ debug in: ie 6.0 
//  @ script by: bluedestiny, never-online 
//  @ updated: 2006-3-22 
//  @ version: 1.0 apha 
//  @ email: bluedestiny [at] 126.com 
//  @ website: http://www.never-online.net 
//  @ please hold this item please. 
// 
//  api 
//  @ class: simulateselect() 
// 
//  @ object.style(ctlstyle[,selstyle][,unselstyle]) 
//    ctlstyle: main control combox css class name 
//    selstyle: when mouseover or option focus css class name 
//    unselstyle: options blur's css class name 
// 
//  @ object.width=(widthpx) 
//    widthpx must be a digit number. 
// 
//  @ object.height=(heightpx) 
//    heightpx must be a digit number. 
// 
//  @ object.getvalue(ctlselid) 
//    ctlselid is the unique select control id 
// 
//  -------------- for the next version ---------- 
//  @ object.readonly = (blnreadonly) 
//    blnreadonly must be a boolean type or a number type. 
//  @ object.addevent(w, h) 
//    w: fire handler's event. 
//    h: handler function. 
//------------------------------------------------------------- 
</pre>

<div class="copyright"> 
power by bluedestiny, never-online 
http://www.never-online.net 
</div>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

上一篇：如何解决ASP.NET新增时多字段取值的问题

下一篇：第5天:head区的其他设置

模仿combox(select)控件，不用为美化select烦恼了。

模仿combox(select)控件，不用为美化select烦恼了。

模仿combox(select)控件，不用为美化select烦恼了。_经验交流

模仿combox(select)控件，不用为美化select烦恼了。_经验交流