地址:http://www.baidufe.com/component/dropdownlist/index.html

效果:

引用JS文件:

    <link href="Js/DropDownList/dropdownlist.css" rel="stylesheet" />
<script src="Js/DropDownList/dropdownlist.js"></script>

JavaScript代码:

<script type="text/javascript">
$(document).ready(function () {
// 通过原生select控件创建自定义下拉框
var ddl_picture = DropDownList.create({
select: $('#ddl_picture'),
attrs: {
column: 4,
width: 150
}
});
// 通过原生select控件创建自定义下拉框
var ddl_picture = DropDownList.create({
select: $('#ddl_picture_2'),
attrs: {
column: 4,
width: 150
}
});
// 通过原生select控件创建自定义下拉框
var ddl_picture = DropDownList.create({
select: $('#ddl_picture_3'),
attrs: {
column: 5,
width: 150
}
});
})
</script>

Html代码:

<table>
<tr> <td >
<select id="ddl_picture">
<option value="d1" selected="selected">松园一号</option>
<option value="d2">松园二号</option>
<option value="d3">松园三号</option>
<option value="d4">松园四号</option>
</select>
</td> <td style ="padding-left:10px;">
<select id="ddl_picture_2">
<option value="f1" selected="selected">一层</option>
<option value="f2">二层</option>
<option value="f3">三层</option>
<option value="f4">四层</option>
</select>
</td>
<td style ="padding-left:10px;">
<select id="ddl_picture_3">
<option value="r1" selected="selected">446</option>
<option value="r2">447</option>
<option value="rf3">448</option>
<option value="r4">449</option>
<option value="r2">447</option>
<option value="rf3">448</option>
<option value="r4">449</option>
<option value="r2">447</option>
<option value="rf3">448</option>
<option value="r4">449</option>
<option value="r2">447</option>
<option value="rf3">448</option>
<option value="r4">449</option>
</select>
</td>
</tr>
</table>

美化 - DropDownList控件的更多相关文章

  1. DropDownList控件

    1.DropDownList控件 <asp:DropDownList runat="server" ID="DropDownList1" AutoPost ...

  2. DropDownList 控件不能触发SelectedIndexChanged 事件

    相信DropDownList 控件不能触发SelectedIndexChanged 事件已经不是什么新鲜事情了,原因也无外乎以下几种: 1.DropDownList 控件的属性 AutoPostBac ...

  3. 三级联动---DropDownList控件

    AutoPostBack属性:意思是自动回传,也就是说此控件值更改后是否和服务器进行交互比如Dropdownlist控件,若设置为True,则你更换下拉列表值时会刷新页面(如果是网页的话),设置为fl ...

  4. c#中DropDownList控件绑定枚举数据

    c# asp.net 中DropDownList控件绑定枚举数据 1.枚举(enum)代码: private enum heros { 德玛 = , 皇子 = , 大头 = , 剑圣 = , } 如果 ...

  5. DropDownList 控件

    今天打算学习下dropdownlist控件的取值,当你通过数据库控件或dataset绑定值后,但又希望显示指定的值,这可不是简单的值绑定就OK,上网搜了一些资料,想彻底了解哈,后面发现其中有这么大的奥 ...

  6. DropDownList控件学习

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  7. 客户端用JavaScript填充DropDownList控件 服务器端读不到值

    填充没有任何问题,但是在服务器端却取不出来下拉表中的内容.页面代码如下. <form id="form1" runat="server"> < ...

  8. DropDownList 控件的SelectedIndexChanged事件触发不了

    先看看网友的问题: 根据Asp.NET的机制,在html markup有写DropDownList控件与动态加载的控件有点不一样.如果把DropDownList控件写在html markup,即.as ...

  9. 在FooterTemplate内显示DropDownList控件

    如果想在Gridview控件FooterTemplate内显示DropDownList控件供用户添加数据时所应用.有两种方法可以实现,一种是在GridView控件的OnRowDataBound事件中写 ...

随机推荐

  1. c++,命名空间(namespace)

    1.什么是命名空间: 命名空间:实际上就是一个由程序设计者命名的内存区域,程序设计者可以根据需要指定一些有名字的空间域,把一些全局实体分别放在各个命名空间中,从而与其他全局实体分隔开来. 2.命名空间 ...

  2. BZOJ 2060: [Usaco2010 Nov]Visiting Cows 拜访奶牛( dp )

    树形dp..水 ------------------------------------------------------------------------ #include<cstdio& ...

  3. A*算法(八数码问题)

    #include <iostream> #include <cstring> #include <vector> #include <cmath> #i ...

  4. HDU 3068 最长回文 【最长回文子串】

    和上一题一样,不过这题只是要求最长回文子串的长度 在此采用了非常好用的Manacher算法 据说还是O(n) 的效率QAQ 详细用法参考了上篇博客的参考资料,这两天有空学习一下~ Source cod ...

  5. 【集训笔记】归纳与递推【HDOJ1297

    例:(2050)折线分割平面 问题描述: 平面上有n条折线,问这些折线最多能将平面分割成多少块? 样例输入 1 2 样例输出 2 7 平面上有n条折线,问这些折线最多能将平面分割成多少块? 解: 折线 ...

  6. svn笔记2

    Examining History Your Subversion repository is like a time machine. It keeps a record of every chan ...

  7. UVA 10603 Fill(正确代码尽管非常搓,网上很多代码都不能AC)

    题目链接:option=com_onlinejudge&Itemid=8&page=show_problem&problem=1544">click here~ ...

  8. C#如何在panl控件上添加Form窗体

    . if (treeView1.SelectedNode.Text == "个人信息") { Form1 f4 = new Form1(); f4.TopLevel = false ...

  9. SVN - 笔记

    SVN(版本控制) 1.什么是SVN · 多人共同开发同一个项目,内部最大的问题是,在比较短的时间内如果有多人同时开发同一个文件,会造成彼此的代码相互覆盖的情况发生. · 管理着随时间改变的数据,这些 ...

  10. 【转】如何在CentOS/RHEL中安装基于Web的监控系统 linux-das

    Linux-dash是一款为Linux设计的基于Web的轻量级监控面板.这个程序会实时显示各种不同的系统属性,比如CPU负载.RAM使用率.磁盘使用率.网速.网络连接.RX/TX带宽.登录用户.运行的 ...