本文旨在大家对select和模拟select有一个全面地了解,使此项技术能发挥出更高的水平。

最初的select的确很平淡,就是一个下拉选项列表:

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

日久天长之后,人们对select要求高了,要修一修边幅:

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

要加一些链接,变成菜单:

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

后来发展到其文字内容可以增、删、编、改，即可以编辑：

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

可编辑的select:

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

为了让select里有更多的图片、CSS修饰及其他静、动态修饰效果，而select本身优先级别太高，其修饰效果很少且不能满足上述要求，遂涌现出很多模拟的select:

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

下面这两个已达到较高的水准（动态内容）：

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

可以去掉下拉的小三角,但不可以无边框:

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

鼠标移过来select自动下拉:

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]